Color contrast checker
Enter a text color and a background color to get the contrast ratio calculated with the WCAG 2 formula, a pass or fail for each level, and a live sample in Arabic and English. Use this contrast checker to pick text colors that stay readable for everyone, including people with low vision.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Type the text color as HEX such as #0F6B5F or as rgb(15, 107, 95), or choose it with the color picker.
- Enter the background color the same way. The text field and the picker always stay in sync.
- Read the contrast ratio and the result of each check: AA and AAA for normal and large text, and non-text UI components.
- Look at the live sample to see real text at normal and large sizes.
- If the color fails, choose a target ratio to get the nearest darker or lighter color that reaches it.
Example
Text #0F6B5F on a #FFFFFF background gives 6.39:1. It passes AA for normal text (4.5:1 required) and AAA for large text, and fails AAA for normal text, which needs 7:1.
Grey #767676 on white gives 4.54:1 and passes AA, while #777777 gives 4.48:1 and fails, although the two colors are one step apart.
Limits and caveats
- The tool calculates the WCAG 2 contrast ratio only (Success Criteria 1.4.3, 1.4.6 and 1.4.11 in WCAG 2.2). It does not calculate APCA, a different method that is not part of WCAG 2.
- It compares two solid colors. It does not check text over images, gradients or video, where contrast changes from point to point.
- A translucent text color (8-digit HEX or rgba) is first composited over the background, and the ratio is calculated for the resulting color. A translucent background is rejected, because its result depends on what lies behind it.
- Pass and fail use the exact, unrounded ratio. The ratio is displayed with two decimals and is never rounded up to a threshold it did not reach: 4.499 is shown as 4.49 and fails 4.5:1.
- Suggestions mix the text color step by step toward black or white until the target is met, so they are the nearest color on that path, not the only possible choice.
- The ratio does not measure everything that affects legibility, such as font weight, typeface, real rendered size and screen brightness.
Questions about this tool
What counts as large text in WCAG?
Text that is at least 18 pt (24 px), or at least 14 pt (about 18.66 px) when it is bold. Large text needs 3:1 for AA and 4.5:1 for AAA.
Why does the tool use the 0.04045 threshold when WCAG 2.0 printed 0.03928?
0.04045 is the corrected threshold from the sRGB standard, and 0.03928 is the value printed in the WCAG 2.0 text. No 8-bit color has a channel between the two values (10/255 = 0.0392 and 11/255 = 0.0431), so the result is identical either way for every HEX color.
What does the “UI components and graphics” check mean?
It is Success Criterion 1.4.11 Non-text Contrast, added in WCAG 2.1: the borders of inputs and buttons, icons, and the parts of graphics needed to understand them need at least 3:1 against adjacent colors.
How do I check the contrast ratio between two colors?
Enter the two colors and the tool calculates the ratio at once with the WCAG 2 formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one. Results run from 1:1 for identical colors to 21:1 for black on white. White on #0F6B5F, for example, gives 6.39:1.
What contrast ratio does WCAG AA require?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA raises that to 7:1 for normal text and 4.5:1 for large text, and UI components and graphics need 3:1. Grey #767676 on white passes AA for normal text at 4.54:1 but fails AAA.