About this tool

The Color Contrast Checker tests whether your text and background colour combinations meet WCAG accessibility standards. You enter two hex, RGB, or HSL values and the tool calculates the contrast ratio, then tells you whether the pairing passes at AA or AAA level. It is useful for designers, front-end developers, and anyone building interfaces that need to be readable by people with low vision or colour blindness.

Reach for this tool whenever you are finalising a colour palette for a website, app, or document. It is especially handy when a client or stakeholder asks for an accessibility audit, when you are submitting work that must meet government or WCAG 2.1 compliance requirements, or when you simply want to confirm that body text, buttons, and link colours will hold up across different screens and lighting conditions.

How to use it

1. Enter your foreground colour as a hex, RGB, or HSL value in the text colour field.
2. Enter your background colour in the background colour field using the same or a different format.
3. Review the calculated contrast ratio displayed below the two colour inputs.
4. Check whether your combination passes WCAG AA or AAA for normal text and large text.
5. Adjust one or both colour values until the ratio meets your required compliance level.
6. Copy the passing colour values back into your design file or stylesheet.

Pro tips

• WCAG AA requires a 4.5:1 ratio for normal text but only 3:1 for text 18pt or larger, so bumping font size can unlock more colour options.
• Test your colours against both white and black backgrounds before committing, since a colour that passes on white can fail badly on dark-mode layouts.

FAQ

Related tools in Web + Code