Contrast Checker
Check WCAG contrast ratio between text and background colors. Live preview, AA/AAA levels, CSS copy, and accessible color suggestions.
The quick brown fox jumps over the lazy dog.
Large heading text
15.26:1
- AA, normal textPass · 4.5:1
- AA, large text (18pt+ / 14pt bold)Pass · 3:1
- AAA, normal textPass · 7:1
- AAA, large textPass · 4.5:1
- UI components & graphicsPass · 3:1
WCAG 2.1 requires 4.5:1 for normal text (AA) and 7:1 for AAA. Large text needs 3:1 (AA) or 4.5:1 (AAA). Non-text UI elements need 3:1.
How it works
Choose colors
Set foreground (text) and background with the color picker or type hex values. Use Swap to flip them or pick a preset.
Review ratio and levels
The contrast ratio updates instantly. Pass/fail rows show AA and AAA for normal text, large text, and UI components.
Copy or fix
Copy CSS color declarations. If AA fails, apply the suggested accessible foreground color with one click.
Why check color contrast?
Low contrast text is one of the most common accessibility failures. Contrast Checker is part of Easy24’s developer toolbox. Your input stays in this tab for normal use; Easy24 does not upload that content to process it. This tool has no daily free-plan cap; use it as often as you need. Typical flow: Pick foreground and background colors with the picker or hex input. The ratio and WCAG pass/fail levels update live. Copy CSS or apply a suggested accessible foreground. Related tools and reverse conversions appear on the page when a follow-up step is common.
Why use this tool
- WCAG 2.1 contrast ratio
- AA and AAA normal + large text
- UI component 3:1 check
- Live text preview
- Copy CSS
- Unlimited use on the free plan
Questions
What contrast ratio do I need?
Normal text: 4.5:1 for AA, 7:1 for AAA. Large text (18pt+ or 14pt bold): 3:1 for AA, 4.5:1 for AAA. UI graphics: 3:1.
How is contrast ratio calculated?
Using relative luminance from WCAG 2.1: (Llighter + 0.05) / (Ldarker + 0.05) where L is computed from sRGB channels.
Can I enter RGB colors?
Hex (#2563eb) is primary. Rgb(37, 99, 235) also parses in the hex input field when pasted.
What does the suggestion do?
When AA normal text fails, it suggests a foreground color (often near black or white) that reaches 4.5:1 against your background.
If Easy24 helped, buy a coffee
Tools stay free. A one-time tip is optional and helps keep them running.
When to use Contrast Checker
Contrast Checker is one of those utilities you open for a few minutes, finish the task, and close without leaving a trail of uploads. Check WCAG contrast ratio between text and background colors. Developer utilities remove friction from small tasks: formatting, snippets, colors, loaders, and other front-end helpers. Compared with installing a desktop suite only for contrast checker, a dedicated page keeps the interface small and the intent obvious. Quota cookies may still track anonymous daily free-plan uses. That is different from receiving your file bytes or pasted text. This page has no daily free-plan cap, so you can run it as often as you need. If a free-plan limit applies, the workspace shows remaining uses before you commit a download, so you are not surprised after a long wait.
Similar Developer tools
See allJSON Formatter
Developer
Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.
OpenMeta Tag Generator
Developer
Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.
OpenCSS Gradient Generator
Developer
Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.
Open