CSS & colour
Color Contrast Checker for WCAG
Enter a text colour and a background colour to see the contrast ratio and whether it meets WCAG 2.x levels AA and AAA. If it fails, the tool suggests the nearest text colour that passes, keeping the same hue.
Loading tool…
The quick brown fox jumps over the lazy dog
Normal body text sits at about 16 px. Check that it is comfortable to read. A link-style example
| Requirement | Needs | Result |
|---|
Colours
Accepts HEX (#1a2b3c or #abc), rgb(26, 43, 60) and hsl(210, 40%, 17%). Semi-transparent colours are blended over the background.
Quick pairs
How to use the Color Contrast Checker
- Enter or pick the text (foreground) colour and the background colour in HEX, RGB or HSL.
- Read the ratio and the pass/fail table for normal text, large text and UI components.
- If a requirement fails, use a suggested colour that keeps your hue.
- Use “Swap” to test the reverse pairing.
Tips for better results
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text (about 24 px regular or 18.66 px bold and above) and for essential UI parts like input borders and icons.
- AAA asks for 7:1 for normal text and 4.5:1 for large text. It is not required for most sites but is a good target for body copy.
- Do not rely on colour alone. Links, errors and charts also need another cue such as an underline, icon or label.
Limitations you should know about
- The checker uses the WCAG 2.x contrast formula. It does not implement the experimental APCA method proposed for future guidelines.
- Translucent text colours are blended over the background. Text over images or gradients needs checking at the worst-case spot.
- Passing contrast does not make a design accessible on its own; it is one of many requirements.
Frequently asked questions
What contrast ratio do I need?
For WCAG 2.x AA: 4.5:1 for normal text, 3:1 for large text and for UI components and graphical objects. For AAA: 7:1 and 4.5:1 for text.
Why does the tool show 4.49 and not round up to 4.50?
Rounding can make a failing colour look like it passes. A ratio just under a threshold is shown just under it, so a pass on screen is a real pass.
What counts as large text?
WCAG defines large text as at least 18 point (24 px) regular, or 14 point (about 18.66 px) bold.
Guides that use this tool
Related tools
- Color Palette Generator Build harmonious palettes from one colour, or extract the dominant colours from an image.
- CSS Gradient Generator Build linear, radial and conic gradients with multiple colour stops and copy the CSS.
- Placeholder Image Generator Create simple placeholder images with custom size, colours and text as PNG, JPG, WebP or SVG.