Free tool
Color Contrast Checker for WCAG 2.2, With a One-Click Fix
Enter a text colour and a background to see the contrast ratio and whether it passes AA and AAA. If it fails, one button finds the nearest passing colour, and you can check a palette, see the colours with colour blindness and share a link. Thresholds read from the W3C's WCAG 2.2 pages on 22 October 2026.
Hex, rgb(), hsl() or a colour name. A see-through colour is checked as it looks on the background, and the background on white.
That colour could not be read. Try a hex code such as #1a1a1a, or rgb(26, 26, 26).
| Test | Needs | Result |
|---|---|---|
| Normal text, AA | 4.5 : 1 | |
| Large text, AA | 3 : 1 | |
| Normal text, AAA | 7 : 1 | |
| Large text, AAA | 4.5 : 1 | |
| Buttons, icons, borders | 3 : 1 |
Large text sample, 24 px
Normal body text looks like this sentence at sixteen pixels.
ButtonText field
An approximate simulation, to help you judge whether the colours still work. It is not a medical test.
Rows are text colours and columns are backgrounds. A filled cell passes AA for normal text (4.5 : 1).
Colours are checked in your browser. Nothing is uploaded.
How the checker works
Enter a text colour and a background colour, or pick them with the colour pickers or, in browsers that support it, with the eyedropper to take a colour from anywhere on your screen. The fields accept hex codes, rgb(), hsl() and colour names. The tool works out the contrast ratio with the WCAG formula and shows whether it passes each level, and a text size field tells you whether the text counts as large. If a pair fails, the Fix button moves the text colour, one small step at a time, to the nearest colour of the same hue that passes, and a list of nearest passing colours lets you change the text or the background instead. Your last colours are saved on this device, and Copy link gives you an address that opens with the same two colours.
See-through colours
If you enter a colour with transparency, such as rgba(0, 0, 0, 0.6), the tool checks the colour as it looks: a see-through background is mixed with white, and the text is then mixed with the background it sits on. That is this tool's choice for a number you can act on, not a WCAG rule, so check the real page if the background is a photo or a gradient.
Seeing the colours as others do
The See it as menu redraws the sample the way it may look with red-blind, green-blind or blue-blind vision, or with no colour vision at all. It is an approximation to help you judge whether the colours still work, and it is not a medical test. A good check is whether the text is still easy to read in each view.
Checking a palette
Paste up to ten colours into the palette box and the grid shows the contrast ratio of every colour as text on every other colour as a background. A filled cell passes AA for normal text. It is a quick way to find which pairs in a brand palette are safe to use for body text.
The WCAG numbers used here
| Criterion | Level | Needs |
|---|---|---|
| 1.4.3 Contrast (Minimum), normal text | AA | 4.5 : 1 |
| 1.4.3 Contrast (Minimum), large text | AA | 3 : 1 |
| 1.4.6 Contrast (Enhanced), normal text | AAA | 7 : 1 |
| 1.4.6 Contrast (Enhanced), large text | AAA | 4.5 : 1 |
| 1.4.11 Non-text Contrast, interface parts and graphics | AA | 3 : 1 against the colours next to them |
Large text means at least 18 point, or 14 point if bold. WCAG notes that one point is 1.333 pixels, so that is roughly 24 pixels, or 18.5 pixels bold. The ratio is compared with no rounding, so 4.499 to 1 fails the 4.5 to 1 test, and this page shows the ratio cut down to two decimals, never rounded up. Sources: W3C, Understanding 1.4.3 (updated 6 September 2026), Understanding 1.4.6 and Understanding 1.4.11, all read on 22 October 2026.
How the ratio is calculated
Each colour is turned into a relative luminance, a number from 0 for black to 1 for white. The contrast ratio is the luminance of the lighter colour plus 0.05, divided by the luminance of the darker colour plus 0.05, which gives a value from 1 to 21. The luminance is 0.2126 times the red part, plus 0.7152 times the green part, plus 0.0722 times the blue part, after each channel is linearised. This tool uses the corrected threshold of 0.04045 in that step.
What the rules do not cover
- Text that is part of a logo or brand name.
- Disabled controls.
- Purely decorative text that could be swapped for other words without changing the page.
A logo's low contrast is exempt only when it comes from brand guidelines, and low contrast chosen by the author is not. A ratio test also cannot judge text over a photo or a gradient, so check those by eye at the lightest and darkest points.
Using it when you design
Check body text, placeholder text, button labels and light grey captions first, since they are the usual failures. Fix the colour in your design file, and keep the corrected value in your style guide so developers use it. If you are redesigning a site, our web design and UI/UX work sets colours with these checks from the start.
Frequently asked questions
What contrast ratio do I need for text?
WCAG 2.2 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 and 4.5 to 1.
What counts as large text?
At least 18 point, or 14 point if bold. WCAG says one point is 1.333 pixels, so about 24 pixels, or about 18.5 pixels bold.
Do buttons and icons need contrast too?
Yes. WCAG 1.4.11 asks for at least 3 to 1 for interface parts and graphics needed to understand the content, measured against the colours next to them.
Is 4.49 to 1 a pass?
No. WCAG compares the exact ratio with no rounding, so a value just under 4.5 fails.
Does it check text over images?
No. It compares two flat colours. For text over a photo or gradient, test the lightest and darkest area behind the text.
Can I enter rgb, hsl or a colour name?
Yes. The fields accept hex codes, rgb(), hsl() and colour names, and a colour with transparency is checked as it looks on the background.
Can I take a colour from my screen?
In browsers that have an eyedropper, such as Chrome and Edge, two buttons appear that let you pick the text or background colour from anywhere on screen.
Can I share a result?
Yes. Copy link gives you an address that opens with the same two colours, and your last pair is saved on your own device.
Are my colours sent anywhere?
No. The calculation runs in your browser.
More free tools
- Robots.txt generator: Build a robots.txt file and download it.
- PX to REM converter: Convert pixels to rem, with a table for any base size.
- Meta title and description checker: Count characters and preview the search result.
- OG image size checker: Check a share image against Meta's size rules.