WCAG Contrast Checker
Enter your text and background colors to instantly check contrast ratio and WCAG 2.x accessibility compliance.
Supports HEX input with live preview, AA/AAA compliance check, and color improvement suggestions.
| Level | Normal Text | Large Text |
|---|---|---|
|
WCAG AA
Normal 4.5:1 / Large 3:1
|
— | — |
|
WCAG AAA
Normal 7:1 / Large 4.5:1
|
— | — |
- Enter text color in HEX (for example, #333333).
- Enter background color in HEX (for example, #FFFFFF).
- Contrast ratio and WCAG 2.x AA/AAA compliance update instantly.
- Review the suggested colors and click to apply improved options.
Tip:For body text, aim for at least 4.5:1 (AA). For important content, aim for 7:1 (AAA).
When would I use this?
- When designing websites, slides, dashboards, or app screens and you want to confirm text is readable against its background.
- When your brand or UI colors are already chosen, but you still need to verify whether they meet accessibility targets.
- When handing off a design or front-end build and you want to catch low-contrast text before release.
Why do people keep mentioning 4.5:1 and 7:1?
4.5:1 is the common WCAG AA threshold for normal text, while 7:1 is the stricter AAA target. These numbers describe how much brightness difference exists between foreground and background. In general, a higher ratio is easier to read.
Why are large text and normal text judged differently?
Larger or bolder text is easier to recognise, so WCAG allows a lower contrast threshold for large text. That said, important content still benefits from stronger contrast whenever possible.
Is meeting AA always enough?
AA is a practical baseline for most products, but it is not the ceiling. If your interface is dense, used in difficult viewing conditions, or serves more low-vision users, aiming for AAA is safer.
Can I use the suggested colors as-is?
Usually yes as a starting point, but you should still review them in the real interface. Check brand fit, visual hierarchy, and states such as hover, disabled, and dark mode before treating them as final.
Does a good ratio guarantee good readability?
Not completely. Contrast ratio is a strong baseline, but font weight, size, spacing, textured backgrounds, and actual screen conditions also affect readability. Use the ratio together with visual review.
Social Media Image Editing Workflow: Sizes, Visual Consistency, and Export Settings
Great social visuals come from process, not luck. Learn a repeatable image editing workflow that covers dimensions, composition, brand consistency, and output settings for high-performing posts.
The Complete Color Code Guide: RGB, HEX & HSL Explained
RGB, HEX, and HSL all describe the same colors — but in completely different ways. This guide breaks down the math, the design logic, and when to use each color model, from screen design to print and accessibility.