# How to Check Color Contrast for Accessibility > Test foreground and background color combinations against WCAG accessibility guidelines. Ensure your design meets AA and AAA contrast ratios. - URL: https://www.browserutils.dev/how-to/check-color-contrast - Published: 2026-04-24 - Updated: 2026-03-16 --- ## Step 1: Enter your foreground color Input the text color you want to test using any format: HEX, RGB, or HSL. Use the color picker if you want to select visually. ## Step 2: Enter your background color Input the background color that will appear behind the text. The tool calculates the contrast ratio between the two colors. ## Step 3: Review the contrast ratio See the calculated contrast ratio and whether it passes WCAG AA (4.5:1 for normal text) and AAA (7:1 for normal text) requirements. ## Step 4: Adjust colors if needed If the contrast ratio fails, use the suggested color adjustments to find the nearest accessible color that maintains your design intent. ## Step 5: Test with different text sizes Check contrast requirements for large text (3:1 for AA) separately from normal text, as large text has more relaxed contrast requirements. Accessible color contrast is not optional; it is a legal requirement in many jurisdictions and a practical necessity for the roughly one in twelve men and one in two hundred women with color vision deficiencies. The [WCAG contrast checker](/tools/wcag-contrast-checker) lets you validate your color pairs against established standards before your users (or their lawyers) discover the problem. ## Understanding WCAG contrast guidelines The Web Content Accessibility Guidelines define contrast requirements at two levels: **WCAG AA** is the baseline standard most organizations must meet. It requires a contrast ratio of at least **4.5:1** for normal text (under 18pt or 14pt bold) and **3:1** for large text (18pt and above, or 14pt bold and above). This level ensures readability for users with moderately low vision. **WCAG AAA** is the enhanced standard, requiring **7:1** for normal text and **4.5:1** for large text. While AAA is not always achievable across an entire site, particularly for brand colors, it is the target for body text and any content that users need to read for extended periods. The contrast ratio itself is calculated from the **relative luminance** of the two colors, which accounts for how the human eye perceives brightness (green appears brighter than blue at the same measured intensity). The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (black on white). **Text size matters** because larger text is inherently easier to read. A heading at 24px can get away with a lower contrast ratio than 14px body copy. This is why the standard distinguishes between normal and large text. However, do not use this as an excuse to put low-contrast text in your UI and call it "large." ## Tips and best practices - **Test your actual color pairs, not approximations.** A color that looks "dark enough" on your monitor might fail on a lower-quality display or in bright sunlight. Always verify the numbers. - **Check interactive states too.** Hover, focus, and disabled states often use lighter or more muted colors that may fail contrast requirements. Test every state, not just the default. - **Do not rely on color alone to convey meaning.** Even with perfect contrast ratios, users who cannot distinguish red from green will miss error states that are communicated only through color. Add icons, underlines, or text labels as secondary indicators. - **Use the [color converter](/tools/color-converter) to find nearby accessible alternatives.** When a brand color fails contrast, you can often adjust the lightness by a few percentage points in HSL to pass while staying visually close to the original. ## Troubleshooting - **Colors pass the checker but still look hard to read:** The WCAG formula measures luminance contrast, not perceptual contrast for all conditions. Colors with similar hue but different luminance (like certain blue-on-purple combinations) can be technically compliant but subjectively difficult. Trust your eyes and aim higher than the minimum. - **Semi-transparent text fails unexpectedly:** When text has an alpha value, the effective contrast depends on what is behind it. The checker evaluates the colors you provide, but if your text is `rgba(0,0,0,0.6)` on a white background, you need to calculate the composited color first and test that. - **Brand guidelines conflict with accessibility:** This is common and the answer is always the same: accessibility wins. Adjust the brand color for text usage while preserving the original for decorative elements like logos and illustrations where contrast requirements do not apply.