AnyTools
🌓
Color Contrast Calculator
Check WCAG 2.1 contrast ratios between any foreground and background colors, preview sample text, and see AA/AAA pass results instantly.
Color inputs
Foreground
Background
Preview
Sample text
Preview headingAccessible interfaces pair vibrant brand colors with enough contrast to keep copy readable.
Contrast results
Contrast ratio
19.79:1
Relative luminance
Foreground0.003
Background1.000
| Criterion | Required | Status | Notes |
|---|---|---|---|
| AA – normal text | 4.5:1 | Pass | Body copy ≥ 4.5:1 |
| AAA – normal text | 7.0:1 | Pass | High-importance copy ≥ 7:1 |
| AA – large text | 3.0:1 | Pass | Text ≥ 18pt regular or 14pt bold ≥ 3:1 |
| AAA – large text | 4.5:1 | Pass | Large text ≥ 4.5:1 |
| UI graphics/icons | 3.0:1 | Pass | Essential icons and visual states ≥ 3:1 |
Design guidance
Use the ratio table as a guardrail and iterate until every state reaches the target level.
- Add transparency or overlays when placing text on photography to preserve contrast.
- Reserve AAA for mission critical copy; AA is an excellent default for most dashboards.
- Document the approved color pairs in your design system so developers reuse compliant palettes.
❓What is color contrast testing
Color contrast testing ensures text or icons remain legible by measuring the difference between foreground and background luminance, a key requirement in WCAG and most brand guidelines.
✨Key features
🎨
Live color picking
Adjust foreground and background colors with the Ant Design picker or type precise HEX values.
📊
WCAG matrix
See AA/AAA requirements for normal text, large text, and UI graphics in a single table.
🧮
Accurate luminance
Contrast ratios follow WCAG 2.1 using linearized RGB channels and include per-color luminance readouts.
👁️
Preview block
Test headings and paragraphs inside a live sample card with your chosen palette.
📋Usage guide
Pick colors
Select or paste HEX values for foreground and background.
Review ratio
Check the calculated contrast ratio and the AA/AAA table for pass/fail insights.
Adjust copy
Edit the sample text to preview real labels, buttons, or marketing copy.
📚Technical introduction
🔢Relative luminance
Each RGB channel is converted to a linear value using the WCAG gamma curve before computing luminance with coefficients 0.2126, 0.7152, and 0.0722.
⚖️Contrast ratio
The ratio formula (L1 + 0.05) / (L2 + 0.05) compares the lighter and darker colors to ensure consistent readability across devices.
📐Thresholds
AA normal text requires ≥ 4.5:1, large text ≥ 3:1, AAA normal needs 7:1, AAA large 4.5:1, and graphical objects should meet 3:1.
❓
Frequently Asked Questions
❓
Does large text use different thresholds?
Yes. Text ≥ 18px regular or 14px bold qualifies as large and only needs 3:1 for AA or 4.5:1 for AAA.
💬
How do I test gradients?
Check the lightest and darkest stops in the gradient. Each stop pair should meet the desired ratio.
🔍
Do icons count as text?
Solid icons and essential UI graphics should meet at least 3:1 contrast relative to their background.
💡How To & Tips
🧭
Start with brand palette
Swap colors quickly to test both light and dark themes from the same base palette.
🪄
Iterate small steps
Nudge HEX values or use the color picker slider to see how little tweaks affect compliance.
📝
Preview content
Paste real UI copy into the preview block to evaluate hierarchy and emphasis.
🔗Related Documents
📖WCAG 2.1 Contrast (Success Criterion 1.4.3)-Official guidance on minimum contrast levels for text and images of text.
📝Update log
📌v1.0.251117v1.0.0Initial release with WCAG table, luminance readout, and live preview card.(Nov 17, 2025)
📦Recommended components
User Comments
Loading...