Color Contrast Checker
Calculate opaque sRGB contrast using WCAG 2.2, inspect both relative luminance values, and check the requirements that apply to text and interface components.
Contrast preview and calculated ratio
Normal text at 16 CSS pixels
Large text at 24 CSS pixels
Large bold text at about 18.67 CSS pixels
Example UI boundaryContrast ratio
6.288:1
Foreground luminance
1.000000
Background luminance
0.116997
Colors to compare
Examples: #1D4ED8, rgb(29, 78, 216), or navy.
Examples: #1D4ED8, rgb(29, 78, 216), or navy.
WCAG 2.2 results
Pass/fail uses the unrounded ratio. Large text means at least 18pt (24 CSS px) regular, or 14pt (about 18.67 CSS px) bold. Font characteristics still affect readability.
Normal text — Level AA
WCAG Success Criterion 1.4.3
Normal text — Level AAA
WCAG Success Criterion 1.4.6
Large text — Level AA
At least 18pt regular or 14pt bold
Large text — Level AAA
At least 18pt regular or 14pt bold
Non-text UI and graphics — Level AA
Required visual boundaries, states, and meaningful graphical objects
Hue-preserving foreground alternatives
Suggestions adjust OKLCH lightness, reduce chroma only when needed for sRGB, then quantize and recheck the displayed color against the selected ratio.
The current pair already meets the selected 4.5:1 target, so no adjustment is needed.
Standard, method, and limits
The calculation follows WCAG 2.2 relative luminance and contrast. Read the W3C explanations for minimum text contrast (1.4.3), enhanced text contrast (1.4.6), and non-text contrast (1.4.11).
This checker evaluates two opaque, flat sRGB colors. It does not resolve transparency, gradients, text over images, font rendering, focus-state completeness, or whether color alone communicates meaning. Automated contrast is one accessibility check, not proof of WCAG conformance or legal compliance; test the rendered interface with people and assistive technology.
Frequently Asked Questions about Color Contrast Checker
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text legibility. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.