Color contrast checker (WCAG)

Why text and background contrast matters

Contrast is the difference in luminance between two colors. When it is too small, text blends into the background and reading takes effort, or does not happen at all. That affects far more people than you might expect:

• People with low vision, who rely on a clear light and dark difference to tell letters apart.
• Natural aging of the eye: over time the lens becomes less transparent and contrast sensitivity drops. A gray that looks elegant to a 25-year-old can be unreadable at 65.
• Poor viewing conditions: a phone in direct sunlight, screen brightness turned down to save battery, weak projectors and badly calibrated monitors.
• People with color vision deficiency, who may see colors of different hues as similar. Luminance contrast keeps working even when the hue difference is lost.

That is why accessibility guidelines measure luminance rather than hue: it is the best predictor of whether text will be readable for the largest number of people.

The WCAG 2.2 contrast criteria

WCAG (Web Content Accessibility Guidelines), published by the W3C, has three success criteria related to color contrast. Version 2.2 keeps the same thresholds as 2.0 and 2.1:

• 1.4.3 Contrast (Minimum), level AA: text and images of text need at least 4.5:1, or 3:1 for large text.
• 1.4.6 Contrast (Enhanced), level AAA: raises the bar to 7:1 for normal text and 4.5:1 for large text.
• 1.4.11 Non-text Contrast, level AA: user interface components (input borders, icon-only buttons, icons that convey meaning) and the parts of graphics needed to understand content need 3:1 against adjacent colors.

Thresholds are not rounded: a pair at 4.49:1 fails AA for normal text. The standard does include exceptions, such as logos, purely decorative text and disabled components. The full wording is in the official W3C documentation.

What counts as large text

For WCAG, large text is at least 18 points (about 24 px) at regular weight, or 14 points (about 18.66 px) in bold. Bigger, heavier letters have wider strokes, so they stay readable with less contrast.

In practice, headings usually qualify as large text; body copy, captions, form labels and inline links do not. Very thin typefaces or unusual letterforms may need more than the minimum contrast, even at large sizes.

How the contrast ratio is calculated

The calculation has two steps. First, each color is converted to relative luminance, a value from 0 (black) to 1 (white). Each RGB channel is divided by 255 and linearized, undoing the sRGB gamma curve:

c = value / 255
if c ≤ 0.04045: c = c / 12.92
else:           c = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

The weights reflect how the eye works: we perceive green as much brighter than blue. Then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.

Example with #FF5733: the linearized channels are R = 1, G ≈ 0.0953 and B ≈ 0.0331, which gives L ≈ 0.283. On white (L = 1), the ratio is 1.05 / 0.333 ≈ 3.15:1: it passes for large text and UI components but fails for normal text. On black (L = 0), the ratio is 0.333 / 0.05 ≈ 6.66:1, enough for AA at any size.

Common contrast mistakes

Light gray on white

This is the most frequent issue on “minimal” websites. #999999 on white is only 2.85:1. The lightest gray that still passes AA for normal text on white is #767676 (4.54:1); #777777 lands at 4.48:1 and fails. For AAA you need to go down to #595959 (7:1).

Text over images

A photo has light and dark areas, and contrast has to work in the worst one. Use the image color picker to sample the lightest pixel behind white text and test it here. If it fails, add a semi-transparent dark overlay on the image or place the text on a solid background.

Placeholder and helper text

Placeholder text inside inputs is often a very light gray. If it conveys information, such as the expected date format, the same 4.5:1 applies. Better still, never use a placeholder as the field's only label.

Focus states, hover and borders

Focus outlines and input borders are visual components and need 3:1 against adjacent colors under criterion 1.4.11. WCAG 2.2 also added criterion 2.4.13 (Focus Appearance, AAA), which covers the size and contrast of the focus indicator. A hover state that only nudges the shade slightly also goes unnoticed by many users.

How to fix a failing color pair

In most cases the fix is to change lightness while keeping the hue: darken the text on light backgrounds or lighten it on dark ones. That way the color stays recognizable as part of your brand. This is exactly what the tool's suggestion does: it finds the text color closest to the original, with the same hue, that reaches AA or AAA, and one button applies it instantly.

1. Enter the text and background colors (the swap button helps you test the reverse pairing, as in dark mode).
2. Check the badges and the live preview.
3. If a level fails, apply the suggestion and make sure the result still fits the rest of your palette.
4. Copy the page link: it stores both colors, so you can send it to your team for review.

Enough contrast does not solve everything. Avoid conveying information through color alone, such as errors in red and success in green with no icon or text. The color blindness simulator shows how your palette looks to others, and our guides on contrast and accessibility and designing for color blindness include practical examples.