InputTestHub

Colour Contrast Checker

Calculates WCAG contrast ratio between two colours and reports AA and AAA pass or fail for normal and large text.

Colour & Design Nothing uploaded No sign-up Free, unlimited
Colour & Design tool
Pick a colour to see every value.
In short WCAG contrast is a ratio between the relative luminance of two colours, running from 1:1 for identical colours to 21:1 for pure black on pure white. The thresholds are 4.5:1 for normal body text at AA, 3:1 for large text — which means 24px, or 18.66px if it is bold — and 7:1 for AAA. Interface components and meaningful graphics need 3:1 against whatever sits next to them, under criterion 1.4.11, and that one is missed far more often than the text rules: a pale grey input border on a white card usually fails it. Treat a pass as a floor rather than a target. 4.5:1 is the point at which text stops being unreadable for most people, not the point at which it becomes comfortable, and going to 7:1 costs nothing on body copy. The honest limitation is that the formula measures luminance only. Two colours can have identical luminance and wildly different hues, and the ratio will call them identical while the eye sees a clear boundary — and the reverse also happens. Use the number as a hard minimum, then look at the result.

How to use the Colour Contrast Checker

  1. Pick a colour with the picker or paste a HEX, RGB or HSL value.
  2. Every other format and the generated variations update instantly.
  3. Click any value or swatch to copy it.

About the Colour Contrast Checker

The Colour Contrast Checker calculates WCAG contrast ratio between two colours and reports AA and AAA pass or fail for normal and large text. It runs as plain JavaScript inside the page, which means there is no upload step, no queue and no size limit imposed by a server — the only limit is your own device.

What people use it for

  • Checking whether body text is legible before shipping.
  • Fixing an accessibility audit failure.
  • Finding the lightest grey that still passes AA.

Details

AA normal text4.5:1 minimum
AA large text3:1 minimum (18pt, or 14pt bold)
AAA normal text7:1 minimum
UI components and graphics3:1 minimum against adjacent colours

The maths behind it

This tool uses the WCAG 2.1 relative luminance formula, giving a ratio from 1:1 (identical) to 21:1 (black on white). Every intermediate value is shown on screen, so the result can be checked by hand.

Frequently asked questions

Does the Colour Contrast Checker cost anything?
There is no cost and no cap. The Colour Contrast Checker is not a demo of a paid product, so nothing is held back or watermarked.
Is the Colour Contrast Checker safe to use with private information?
No. The Colour Contrast Checker runs entirely in your browser using JavaScript. Nothing is transmitted, logged or stored, which you can verify yourself in the Network tab of your browser's developer tools.
What formula does the Colour Contrast Checker use?
It uses the WCAG 2.1 relative luminance formula, giving a ratio from 1:1 (identical) to 21:1 (black on white). The full working is printed under the result, so you can follow every step rather than trusting a black box.
When would I actually need the Colour Contrast Checker?
Typical uses: checking whether body text is legible before shipping. Fixing an accessibility audit failure. Finding the lightest grey that still passes AA. It is built for exactly those cases rather than being a general-purpose tool with this bolted on.
What are the reference figures here?
AA normal text is 4.5:1 minimum. AA large text is 3:1 minimum (18pt, or 14pt bold). AAA normal text is 7:1 minimum. These are printed on the page itself, so you do not have to take them on trust.
Can I use the Colour Contrast Checker on mobile?
Yes. The page is responsive and the tool works in Chrome, Safari, Firefox, Edge and Samsung Internet on both Android and iOS. There is no app to install and nothing to sign into.

Related colour & design tools

All 33
01

Colour Code Converter

Converts colours between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and named CSS colours.

02

Colour Picker

Picks any colour and shows its HEX, RGB, HSL, HSV, CMYK and LAB values, plus tints, shades and…

03

HEX to RGB Converter

Converts HEX colour codes to RGB and RGBA values, handling 3, 4, 6 and 8 digit hex.

04

RGB to HEX Converter

Converts RGB and RGBA values into HEX colour codes, including 8-digit hex with alpha.

05

HSL Colour Converter

Converts between HSL, HEX and RGB, so you can adjust lightness and saturation predictably.

06

CMYK Colour Converter

Converts between CMYK and RGB or HEX for print work, with a note on gamut differences.

10

Tailwind Colour Converter

Finds the nearest Tailwind colour class for any hex value, and shows the hex for any Tailwind…