Color Design and Image Tools
Check Accessible Color Contrast
100% Free No Signup Runs in Browser
Work with colors using the accessible color checker, with copy-ready values where supported.
How much contrast is enough?Contrast ratio compares how bright your text is against its background, from 1:1 (identical colors, invisible) to 21:1 (black on white).
- 4.5:1 is the minimum for normal body text (WCAG level AA). This is the number most accessibility audits and Lighthouse check.
- 3:1 is enough for large text (24px+, or 18.66px+ bold) and for buttons, form borders, icons and focus rings.
- 7:1 is the enhanced level (AAA). Aim for it for long reading, small text, or audiences with low vision.
- Below 3:1 fails for everything except decoration and disabled controls.
5.16:1Contrast ratio (1:1 to 21:1)
AABest WCAG 2 level for normal text
PassAA normal text (4.5:1)PassAA large text (3:1)FailAAA normal text (7:1)PassAAA large text (4.5:1)PassUI components & icons (3:1)
Live preview
Normal text (16px). The quick brown fox jumps over the lazy dog. Can you read this comfortably?
Large text (24px) — headings and display text.
Large bold text (18.66px bold)
Outlined buttonSmall print (12px)
Passes AA. For AAA (7:1), try #134DCD (7.06:1)
Check your whole palette
Rows are text colors, columns are background colors. 8 text/background combinations pass AA for normal text.
| Text ↓ / Background → | #0F172A | #FFFFFF | #2563EB | #F59E0B | #64748B |
|---|---|---|---|---|---|
| #0F172A | — | 17.85:1 AAA | 3.45:1 AA Large | 8.31:1 AAA | 3.75:1 AA Large |
| #FFFFFF | 17.85:1 AAA | — | 5.16:1 AA | 2.14:1 Fail | 4.75:1 AA |
| #2563EB | 3.45:1 AA Large | 5.16:1 AA | — | 2.4:1 Fail | 1.08:1 Fail |
| #F59E0B | 8.31:1 AAA | 2.14:1 Fail | 2.4:1 Fail | — | 2.21:1 Fail |
| #64748B | 3.75:1 AA Large | 4.75:1 AA | 1.08:1 Fail | 2.21:1 Fail | — |
Direct Answer
Use the Accessible Color Checker when you need to test whether foreground and background colors are accessible enough for readable web text and interface elements.
How to Use Accessible Color Checker
- Use the colour picker or type a hex code directly into the text field.
- HEX, RGB, and HSL values update instantly as you pick a colour.
- Click Copy HEX, Copy RGB, or Copy HSL to copy any format.
Reference
| Feature | Details |
|---|---|
| Purpose | Complete the utility task shown on this page. |
| Input | The value or content requested by the tool. |
| Result | The generated or processed output shown on the page. |
| Best for | Quick browser-based utility work. |
| Category | Color Design and Image Tools |
| Works on | Desktop, tablet, and mobile browsers |
Useful Related Tools
Frequently Asked Questions
Is what I enter in the Accessible Color Checker sent anywhere?
No. The calculation or transformation runs in your browser, so the values you type are not sent to a server or stored.
Browse Categories
Related Tools
View category Color Picker Work with colors using the color picker, with copy-ready values where supported. Color Palette Generator Work with colors using the color palette generator, with copy-ready values where supported. Gradient Generator Work with colors using the gradient generator, with copy-ready values where supported. HEX To RGB Converter Convert hex to rgb values with instant single-value and bulk results. RGB To HEX Converter Convert rgb to hex values with instant single-value and bulk results. HEX To HSL Converter Convert hex to hsl values with instant single-value and bulk results. HSL To HEX Converter Convert hsl to hex values with instant single-value and bulk results. RGB To HSL Converter Convert rgb to hsl values with instant single-value and bulk results.