Color Contrast Checker
Is your text readable? Check the contrast, fix it in one click, and test your whole palette.
At a glance
- Calculates the WCAG 2 contrast ratio and checks AA and AAA for normal and large text, plus 3:1 for icons, borders and controls (1.4.11).
- Make it pass: finds the nearest text or background colour that reaches AA or AAA — same hue, only lightness changes — and applies it in one click.
- Accepts any CSS colour: hex (with alpha), rgb(), hsl(), oklch(), lab() and names. Translucent colours are measured as they appear.
- A live preview of headings, body text, links, a button and an input border in your colours.
- Shows the pair with protanopia, deuteranopia, tritanopia and achromatopsia, using the Machado (2009) model.
- Palette grid: up to 12 colours, every one as text on every other, graded AAA / AA / large-only. Share a pair with a link.
Step by step
How to check colour contrast
- 1
Enter the text colour
Type any CSS colour or use the colour picker.
- 2
Enter the background
The colour behind the text.
- 3
Read the result
The ratio and which WCAG levels pass for normal text, large text and controls.
- 4
Fix it
If it fails, use a suggested text or background colour, or drag the lightness slider.
Features
Everything you need, nothing you don’t
AA and AAA
Normal text, large text and UI parts.
One-click fixes
Nearest passing colour, same hue.
Any CSS colour
Hex, rgb, hsl, oklch and names.
Live preview
Text, link, button and border.
Colour blindness
Four types of colour vision.
Palette grid
Every pair in your palette.
WCAG contrast requirements
The ratio compares the relative luminance of the two colours, from 1:1 (the same) to 21:1 (black on white). Ratios are not rounded up: 4.49:1 fails AA. Logos, disabled controls and decorative text are exempt.
| What | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| Icons, borders, focus rings, chart lines | 3:1 | — |
Why only lightness changes
Contrast depends almost entirely on how light or dark the colours are. The suggestions keep your colour’s hue and adjust its lightness in the OKLCH colour space, so your blue stays blue — just darker or lighter — and the fix is as small as possible.
FAQ
Frequently asked questions
What contrast ratio do I need?
Is grey text on white accessible?
Does this use APCA?
How are transparent colours handled?
Can I check colours in OKLCH or by name?
Why does the colour-blind preview show the same ratio?
Keep going
Related tools
CSS Gradient Generator
Make beautiful CSS gradients: linear, radial and conic, smooth OKLCH blending, drag-and-drop colour stops, Tailwind classes and PNG wallpapers. Free.
Image Color Picker
Pick colours from any image: get HEX, RGB, HSL and CMYK codes with a zoom loupe, plus the image’s colour palette. Free, private — nothing is uploaded.
CSS Box Shadow Generator
Free CSS box-shadow generator: build smooth layered shadows, edit each layer, start from Tailwind or Material presets, and copy CSS, Tailwind or React.
CSS Glassmorphism Generator
Free glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live, and copy CSS, Tailwind or React code.
CSS Neumorphism Generator
Free neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states, Tailwind classes and a UI kit.
CSS to Tailwind Converter
Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.
Last updated Report a problem or suggest a feature