Color Contrast Checker
Pick a text color and a background to get the exact WCAG 2 contrast ratio with pass or fail results for AA, AAA and UI graphics. If a pair fails, the tool suggests the closest color that passes.
Live preview
Normal text (16px): The quick brown fox jumps over the lazy dog. Body copy like this needs a ratio of at least 4.5:1.
Large text (24px)
Bold large text (18.66px bold)
Suggest nearest passing color
Keeps the hue and saturation and changes only lightness, by the smallest amount needed.
How to use the Color Contrast Checker
- Choose the text color with the picker or type a HEX, RGB or HSL value.
- Choose the background color the same way. Use Swap to flip the two.
- Read the contrast ratio and the pass or fail badges for AA, AAA and UI components.
- Check the live preview to see body text, large text, a button, a link and icons.
- Fix a failing pair: press Apply on a suggested text or background color that passes AA or AAA.
- Copy the result or the share link to send the exact colors to a teammate.
WCAG contrast requirements at a glance
| Criterion | Applies to | Minimum ratio |
|---|---|---|
| 1.4.3 Contrast (Minimum), AA | Normal text | 4.5:1 |
| 1.4.3 Contrast (Minimum), AA | Large text (24px, or 18.66px bold) | 3:1 |
| 1.4.6 Contrast (Enhanced), AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced), AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast, AA | Icons, form field borders, focus rings, chart lines | 3:1 |
Logos, purely decorative images and disabled controls are exempt. Text that is part of a photo still counts if it carries information.
The formula, step by step
For each color, divide the red, green and blue values by 255. Linearize every channel: if the value is 0.04045 or less, divide it by 12.92; otherwise compute ((value + 0.055) / 1.055) raised to the power 2.4. Then combine them into relative luminance:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), with L1 the lighter of the two colors. White has L = 1 and black has L = 0, so black on white gives (1.05 / 0.05) = 21:1, the maximum. Green dominates the formula because the eye is most sensitive to it, which is why pure green (#00ff00) is much "lighter" than pure blue (#0000ff).
Worked examples
| Text | Background | Ratio | Result |
|---|---|---|---|
| #000000 | #ffffff | 21:1 | Passes everything |
| #595959 | #ffffff | 7.0:1 | Passes AAA normal text |
| #767676 | #ffffff | 4.54:1 | Passes AA normal text |
| #777777 | #ffffff | 4.48:1 | Fails AA normal, passes AA large |
| #ffffff | #0000ff | 8.59:1 | Passes AAA |
| #ffffff | #ff0000 | 4.0:1 | Large text and UI only |
| #ffffff | #00ff00 | 1.37:1 | Fails everything |
Tips for accessible color pairs
- Change lightness, not hue. Contrast depends almost only on luminance. Darkening a brand color a few steps usually keeps it recognizable while passing AA.
- Check every state. Hover, focus, visited links, placeholder text and error messages need their own checks.
- Test text on images against the lightest and darkest areas behind it, or add a solid or semi-opaque backdrop.
- Do not rely on color alone to convey meaning. Pair colored states with text, icons or underlines (SC 1.4.1).
Need colors that pass from the start? Pick your brand hue first, then use the suggestions above to find the lightest shade that reaches 4.5:1 on white for body text and a darker shade that reaches 7:1 for long-form reading.
Frequently asked questions
What contrast ratio does WCAG require?
WCAG 2 level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. User interface components and meaningful graphics such as icons, input borders and focus indicators need at least 3:1 against adjacent colors.
What counts as large text?
Large text is at least 18 point (24 CSS pixels) in regular weight, or at least 14 point (about 18.66 CSS pixels) in bold. Anything smaller is normal text and needs the stricter ratio.
Why does #777777 on white fail AA?
Its contrast ratio is about 4.48:1, which this tool shows as 4.47 because WCAG thresholds are strict and values are never rounded up. 4.48 is below 4.5, so it fails for normal text. #767676 is the lightest gray that passes on white, at about 4.54:1.
How is the contrast ratio calculated?
Each color is converted to relative luminance: the sRGB channels are linearized and weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 for identical colors to 21:1 for black on white.
How does text opacity affect contrast?
Semi-transparent text is mixed with the background behind it, so its visible color is lighter or darker than the original. The tool blends the text color over the background at the chosen opacity and measures that rendered color, which is what users actually see.
Does passing WCAG contrast guarantee readable text?
It is a minimum, not a guarantee. Very thin fonts, small sizes, busy background images and some color vision deficiencies can still make text hard to read. Aim higher than the minimum for long body text where you can.
Is the newer APCA method used here?
No. This tool uses the WCAG 2.x contrast formula, which is the one referenced by current laws and standards such as WCAG 2.1 and 2.2, EN 301 549 and Section 508. APCA is a proposed method for a future WCAG version and gives different numbers.