Color Contrast Checker
Check WCAG contrast for text and interface colors.
Color Contrast Checker: the tool
Colors
Result
The quick brown fox jumps over the lazy dog. Normal text at 16 px.
Large text at 24 px bold
A bordered control
4.54:1
contrast ratio, from 1:1 (no contrast) to 21:1 (black on white)
| Use | Needs | Result |
|---|---|---|
| Normal text, level AABody text, under 24 px (18 pt), or under 18.66 px (14 pt) when bold. | 4.5:1 | ✓ Pass |
| Large text, level AAText of 24 px (18 pt) or more, or 18.66 px (14 pt) or more when bold. | 3:1 | ✓ Pass |
| Normal text, level AAAThe enhanced level for body text. | 7:1 | ✗ Fail |
| Large text, level AAAThe enhanced level for large text. | 4.5:1 | ✓ Pass |
| Interface parts and graphicsBorders of inputs, icons and chart marks that carry meaning (WCAG 1.4.11). | 3:1 | ✓ Pass |
With color-vision deficiency
- Protanopia4.54:1✓ Pass
- Deuteranopia4.54:1✓ Pass
- Tritanopia4.54:1✓ Pass
- Achromatopsia4.54:1✓ Pass
The pass or fail shown is for normal text at level AA, calculated on the simulated colors.
Choose a text color and a background color and see at once whether people can read the text. The checker gives the contrast ratio, tells you in plain words whether the pair passes WCAG level AA and AAA for normal text, large text and interface parts, and, when it fails, suggests the nearest text color that passes. It also shows the pair as people with color-vision deficiencies are likely to see it.
How it works
The ratio compares how much light each color gives off. First each color gets a relative luminance, from 0 for black to 1 for white, found by turning the red, green and blue values back into linear light and weighing them 21.26%, 71.52% and 7.22%, because the eye is most sensitive to green. The ratio is then (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color. It runs from 1:1 for two identical colors to 21:1 for black on white.
WCAG 2 sets the minimum ratios. Level AA needs 4.5:1 for normal text and 3:1 for large text. Level AAA, the enhanced level, needs 7:1 and 4.5:1. Interface parts that carry meaning, such as the border of a field or an icon, need 3:1. Large text means 24 pixels (18 points) or more, or 18.66 pixels (14 points) or more in bold.
A pass or fail is decided on the exact ratio, not on the rounded one on screen. The ratio is shown cut to two decimals instead of rounded, so a pair that falls just short of 4.5:1 is never displayed as 4.50:1. A transparent color is worked out as it would appear, the text over the background and the background over white, before the ratio is taken.
When the pair fails, the tool looks for the nearest text color that passes. It keeps the hue and saturation and changes only the lightness, in whichever direction needs the smaller change, so the replacement stays recognizably the same color. If no lightness can reach the target against that background, it says so and suggests changing the background too.
How to use it
- Enter the text color and the background color, as HEX or any other format, or choose them with the pickers.
- Read the ratio and the Pass or Fail beside each use: normal text, large text, and interface parts.
- If a pair fails, press Use it on the suggested color, or change the colors yourself.
- Look at the color-vision rows to see whether the pair still works for people with a deficiency, and press Copy result to keep the numbers.
Example
Two greys on white, run through the same code as the tool above: the lightest grey that passes AA for normal text, and the one just beyond it, with the fix the tool offers.
What was set
- Text color
- #777777
- Background
- #FFFFFF
What came out
- Contrast ratio
- 4.47:1
- Normal text, AA
- Fail (needs 4.5:1)
- Large text, AA
- Pass (needs 3:1)
- Normal text, AAA
- Fail (needs 7:1)
- Suggested text
- #767676 (4.54:1)
Good to know
- The checker applies the WCAG 2 contrast ratio, which is the standard most laws and policies refer to. It does not calculate APCA, a newer method that WCAG 3 may adopt.
- A passing ratio is the minimum, not a guarantee of comfort. Thin fonts, small sizes, glare, and text over a photograph or a gradient need a margin the ratio does not show.
- Two colors are compared. For text over an image or a gradient, check the lightest and darkest parts of the background that sit behind the text.
- Logos, text that is only decoration and inactive controls are outside WCAG's contrast requirements, though the tool will still give their ratio.
Questions people ask
What contrast ratio do I need?
For normal text, at least 4.5:1 to meet level AA, and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Parts of the interface, such as input borders and icons, need 3:1 against their surroundings.
What counts as large text?
WCAG defines it as at least 18 points, which is 24 pixels, or at least 14 points, about 18.66 pixels, when bold. Anything smaller counts as normal text and needs the higher ratio.
Why does it show 4.47:1 when another checker shows 4.48:1?
This tool cuts the ratio to two decimals instead of rounding it. The true ratio of #777777 on white is 4.478, which rounds to 4.48 but is below 4.5, and cutting it to 4.47 keeps the shown number honest. The pass or fail is the same either way.
Does contrast matter for disabled buttons or logos?
WCAG does not set a minimum for inactive controls, logos or purely decorative text. In practice, a disabled control that cannot be read at all is confusing, so many designs keep it above 3:1 anyway.
Is contrast the only thing that matters for color accessibility?
No. Do not use color as the only way to show something, such as red for an error or green for success, because people who cannot tell those colors apart would miss it. Add a word, an icon or a pattern as well.