About the Color Contrast Checker
Color Contrast Checker tells you whether a text colour is readable on a background colour by the rules in the Web Content Accessibility Guidelines. Enter two colours as hex codes or pick them with the colour picker, and the tool shows the contrast ratio from 1 to 21, a live preview with large and normal text and a table of pass or fail results for AA and AAA levels, for normal text, large text and interface elements. If the pair fails, it suggests the closest text colour that passes AA and, if possible, AAA, and you can apply it with one click. A swap button switches text and background. The calculation follows the WCAG formula using relative luminance and runs in your browser.
Updated September 2026
How to use the Color Contrast Checker
- 1Enter the text colour and the background colour as hex codes, or use the colour pickers.
- 2Check the preview to see how the pair looks with large and normal text.
- 3Read the contrast ratio and the pass or fail table for AA and AAA.
- 4If the pair fails, look at the suggested colour and press Use it.
- 5Copy the new hex code into your design or stylesheet.
Why contrast matters
Text that is hard to read is a problem for everyone: people in bright sunlight, people with tired eyes and the many people with low vision or colour blindness. Contrast is the difference in brightness between text and its background, and the Web Content Accessibility Guidelines give clear minimum ratios so that designers can test instead of guess. Many laws and public-sector rules point to them, which makes a contrast check a common step before a design goes live.
Pale grey text on white, white text on yellow and coloured text on coloured buttons are the usual failures. They may look elegant on a good screen and still be unreadable on a phone outdoors.
Reading the table
- AA is the standard target for most websites and apps.
- AAA is stricter and is worth aiming for on long reading text.
- Large text needs less contrast because bigger letters are easier to see.
- Icons, input borders and chart lines need 3 to 1 against what is around them.
Fixing a failing pair
The quickest fix is to darken the text on a light background or lighten it on a dark one. The tool does this for you and keeps the colour family. If the suggestion changes the look too much, change the background instead, or make the text larger and bolder so the large-text rules apply.
Watch hover, disabled and placeholder states too. Placeholder text in forms is a common failure, and disabled controls are excused by WCAG but still need to be understandable.
Related tools
Color Converter changes between hex, RGB and HSL, Image Color Picker takes a colour from a photo, Favicon Generator makes site icons and Aspect Ratio Calculator helps size images for layouts. Meta Tag Generator and Keyword Density Checker help with the other parts of a page's quality.
Features
- WCAG 2.x contrast ratio from 1 to 21
- AA and AAA for normal text, large text and controls
- Live preview with large and normal sample text
- Suggested text colour that passes AA or AAA
- Swap text and background in one click
- Hex codes with 3 or 6 digits, plus colour pickers
- Ratios are not rounded up to pass
- Runs in your browser
Frequently asked questions
What is a good contrast ratio for text?
WCAG level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. Level AAA asks for 7 to 1 for normal text and 4.5 to 1 for large text. Black on white has the highest possible ratio of 21 to 1.
What counts as large text?
WCAG defines large text as at least 24 CSS pixels, or at least about 18.7 pixels when the text is bold. Smaller text needs the higher ratio. The tool shows both so you can judge by the size you use.
How is the contrast ratio calculated?
Each colour is converted to its relative luminance, a measure of how bright it appears to the eye, with green weighted most and blue least. The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. The tool uses the exact formula from WCAG.
Is grey text #777 on white accessible?
Just barely not. #777777 on white has a ratio of about 4.48 to 1, which is under 4.5 and fails AA for normal text. The lightest grey that passes on white is #767676, at about 4.54 to 1.
Do buttons, icons and form borders need contrast too?
Yes. WCAG 2.1 asks for at least 3 to 1 for user interface components and graphics that are needed to understand the page, such as input borders, icons and chart lines. The last row of the table shows that check.
Does the tool suggest a colour that passes?
Yes. When a pair fails, it moves your text colour towards black or white, whichever has more room, until the ratio reaches 4.5, and shows the result. It keeps the hue as close as it can, but very light or very saturated colours may change noticeably.
Is passing the contrast test enough for accessibility?
No. Contrast is one part. Colour should never be the only way to show meaning, text should be resizable and pages should work with a keyboard and screen readers. Use this tool with other checks and real-user testing.