How to use it
Choose or type two opaque six-digit hex colors. The ratio and text threshold results update automatically. Swap the colors to preview the reverse combination.
THE TOOLBOX / ACCESSIBILITY
Make color
more readable.
Check text and background colors against WCAG text contrast thresholds.
Opaque six-digit hex, e.g. #AABBCC.
Opaque six-digit hex, e.g. #AABBCC.
● Calculated in your browser
Results update as colors change.
CONTRAST RATIO15.47:1
Displayed ratio rounded down to two decimal places. Pass or fail uses the full, unrounded ratio.
Normal text · AAMinimum 4.5:1
PASSLarge text · AAMinimum 3:1
PASSNormal text · AAAMinimum 7:1
PASSLarge text · AAAMinimum 4.5:1
PASSCOLOR PREVIEW
A little more clarity.
Normal text preview. Color choices affect readability.
THE DETAILS
Contrast in context.
WCAG text thresholds
For normal text, AA requires 4.5:1 and AAA requires 7:1. For large text, AA requires 3:1 and AAA requires 4.5:1. Large text is at least 18pt, or 14pt bold.
What this checks
This checks the contrast of two solid opaque colors for text. Transparency, gradients, images, non-text controls, and other accessibility requirements need separate evaluation. A passing pair does not certify a page.
Calculation and privacy
Results use the WCAG 2 relative luminance formula for sRGB colors and calculate locally in your browser. The displayed ratio is rounded down; pass and fail use the unrounded value. Read the W3C guidance ↗