Color Contrast Checker
Check WCAG contrast ratio between two colors.
Almost before we knew it,
we had left the ground. — sample text
Contrast Ratio
17.06:1
AA · NormalPass
AA · LargePass
AAA · NormalPass
AAA · LargePass
WCAG Contrast, Explained
Web accessibility guidelines (WCAG) require sufficient contrast between text and its background so everyone can read it. The ratio ranges from 1:1 (identical) to 21:1 (black on white). The thresholds: AA needs 4.5:1 for normal text and 3:1 for large text (≥18.66px bold or ≥24px); AAA needs 7:1 and 4.5:1 respectively. Ratios use the official relative-luminance formula, computed locally in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.