Color Contrast Checker
Check WCAG 2.x colour contrast for text and UI: ratio, AA and AAA pass or fail, a live preview, and a Suggest mode that finds the closest passing colour.
How to use Color Contrast Checker
- 1Enter the foreground (text) colour and the background colour, or pick them with the colour pickers.
- 2Read the contrast ratio and the AA, AAA, large text and UI component results, with a live preview of text and a button.
- 3Switch to Suggest to get the nearest foreground that reaches each target, then press Use this to apply it.
What makes it better
- Ratio follows the WCAG 2.x relative luminance formula; black on white gives 21:1 and #767676 on white gives 4.54:1
- Separate pass or fail for AA and AAA normal text, AA and AAA large text, and the 3:1 rule for UI components and graphics
- A failing ratio is never rounded up into a pass; values like 4.499 are shown with three decimals
- Suggest mode changes only OKLCH lightness, keeps the hue, and reports the real ratio of the suggested colour
- Swap button, live preview, and both colours accept hex, rgb(), hsl(), hwb(), lab(), lch(), oklch() or CSS names
About Color Contrast Checker
Enter a foreground and a background in any colour format and see the WCAG 2.x contrast ratio with pass or fail for AA and AAA normal text, large text and UI components. Suggest mode keeps your hue and changes only the lightness, in OKLCH, until the colour reaches 3:1, 4.5:1 and 7:1. Semi-transparent colours are composited first, and the page says so.
Common uses
- Verify that body text and its background meet AA before shipping a page or design handoff.
- Find a darker version of a brand colour that still looks like the brand but passes 4.5:1 on white.
- Check that a button border, icon or chart line reaches the 3:1 non-text contrast requirement.
- Collect a quick contrast report to paste into an accessibility audit or pull request.
Example
Input
#767676
Result
Contrast ratio: 4.54:1 Foreground: #767676 Background: #ffffff AA normal text (4.5:1): Pass AAA normal text (7:1): Fail AA large text (3:1): Pass AAA large text (4.5:1): Pass UI components and graphics (3:1): Pass
Good to know
- This is the WCAG 2.x contrast ratio only. APCA, the method proposed for WCAG 3, is a different calculation and is not implemented here.
- A foreground with alpha is composited over the background, and a background with alpha is composited over white. The result describes the blended colour, which can differ from what a page with another backdrop will show.
- Large text means 18 pt (24 px) or 14 pt (about 18.7 px) bold or heavier. Contrast ratio does not replace testing with real users or checking text over images and gradients.
Color Contrast Checker FAQ
What contrast ratio do I need to pass WCAG AA?
AA asks for at least 4.5:1 for normal text and 3:1 for large text, and 3:1 for user interface components and graphical objects. AAA raises normal text to 7:1 and large text to 4.5:1.
How is the contrast ratio calculated?
Each colour's relative luminance is computed from its linearised sRGB channels with weights 0.2126, 0.7152 and 0.0722. The ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05, so it always falls between 1:1 and 21:1.
How does the Suggest mode choose a colour?
It converts your foreground to OKLCH, keeps the hue, and moves lightness in small steps both ways until the 8-bit result reaches the target ratio. The nearest change wins, and chroma is reduced only when the colour would leave sRGB.
Does it work with transparent colours?
Yes. A semi-transparent foreground is blended over the background, and a semi-transparent background is blended over white. A note appears whenever this happens so you know the ratio belongs to the blended colour.
Can the page check APCA contrast?
No. APCA gives different numbers from the WCAG 2.x ratio and is still a draft for WCAG 3. Compliance today is judged against WCAG 2.x, which is what this checker computes.