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
CriterionRequiredStatusNotes
AA – normal text4.5:1PassBody copy ≥ 4.5:1
AAA – normal text7.0:1PassHigh-importance copy ≥ 7:1
AA – large text3.0:1PassText ≥ 18pt regular or 14pt bold ≥ 3:1
AAA – large text4.5:1PassLarge text ≥ 4.5:1
UI graphics/icons3.0:1PassEssential 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

1️⃣
Pick colors
Select or paste HEX values for foreground and background.
2️⃣
Review ratio
Check the calculated contrast ratio and the AA/AAA table for pass/fail insights.
3️⃣
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.
🧪WCAG 2.1 Contrast (1.4.6)-Enhanced contrast requirements for AAA conformance.
🧭MDN - Calculating luminance-Background on the linear RGB formula used in accessibility tooling.
📐W3C - Contrast ratio math-Details on the ratio formula, rounding, and rationale.
🎨Inclusive Design Cards-Tips on pairing colors and typography for diverse audiences.

📝Update log

📌v1.0.251117
v1.0.0Initial release with WCAG table, luminance readout, and live preview card.(Nov 17, 2025)

📦Recommended components

User Comments

0 / 2000
Loading...