Color Contrast Checker
Measure WCAG 2.2 contrast in sRGB, inspect both relative luminance values, and check the requirements that apply to text and interface components. Translucent colors are composited over the page backdrop first, so the ratio describes what a reader actually sees.
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 / 60%), #1D4ED899, or navy.
Examples: #FFFFFF, rgba(0, 0, 0, 0.5), or white.
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. A translucent foreground keeps its opacity, so a suggestion never silently turns it solid.
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).
Translucent colors are flattened by source-over compositing on gamma-encoded sRGB channels, quantized to 8 bits — the same arithmetic a browser uses to paint them, so the measured color is the rendered one. That covers one flat layer over a known opaque backdrop.
It does not resolve gradients, text over images, stacked semi-transparent layers, backdrop filters, 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.
Large text is defined as 14pt (18.66px) bold or 18pt (24px) regular weight and above. Large text has lower contrast requirements because it's easier to read.
For general web content, aim for at least 4.5:1 (AA). For body text and important content, 7:1 (AAA) is recommended. Higher contrast generally improves readability for everyone.
The contrast ratio calculation is based on luminance, which helps ensure readability regardless of color perception. However, you should also test with color blindness simulators for color-coded information.
Enter it with its alpha — rgba(0, 0, 0, 0.4) or 8-digit hex like #0000FF80 — or use the opacity slider, then set the page backdrop underneath it. The ratio is measured on the color that actually gets painted. Measuring the solid color instead badly overstates contrast: black at 40% opacity scores 21:1 as a solid color but renders on white at 2.85:1, which fails every WCAG threshold.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.
Color Palette Generator
Generate harmonious color palettes from any base color
Hex to RGB Converter
Convert hex color codes to RGB values instantly
Color Picker from Image
Pick colors from any image and extract color palettes
Random Color Generator
Generate reproducible colors with constraints, locks, history, and exports
Color Blindness Simulator
See how your palette looks with each type of color vision deficiency