Color Contrast Checker
Check the contrast ratio between a text and a background color against WCAG AA and AAA. Runs entirely in your browser. Nothing is sent to any server.
What is a color contrast ratio?
The contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) use it to decide whether text is readable for people with low vision or color deficiencies: level AA requires at least 4.5:1 for normal text and 3:1 for large text, level AAA raises that to 7:1 and 4.5:1, and icons, input borders and other meaningful graphics need 3:1. This checker computes the ratio with the WCAG formula, tells you which of those criteria a pair of colors meets and, when one falls short, suggests the closest text color that passes, keeping its hue.
Examples
The WCAG relative luminance and contrast formula, and where else to find it:
const lin = (c) => (c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
const lum = ([r, g, b]) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
const [hi, lo] = [lum(fg), lum(bg)].sort((a, b) => b - a);
const ratio = (hi + 0.05) / (lo + 0.05);def lin(c):
c /= 255
return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
def lum(r, g, b):
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)function lin($c) { $c /= 255; return $c <= 0.04045 ? $c / 12.92 : (($c + 0.055) / 1.055) ** 2.4; }
function lum($r, $g, $b) { return 0.2126 * lin($r) + 0.7152 * lin($g) + 0.0722 * lin($b); }func lin(_ c: Double) -> Double {
let v = c / 255
return v <= 0.04045 ? v / 12.92 : pow((v + 0.055) / 1.055, 2.4)
}Use Cases
Reviewing a design before handoff
Check every text and background pair in a mockup so accessibility issues are fixed in the design, not discovered in an audit after launch.
Picking accessible brand colors
Find out whether a brand color can be used for body text or only for large headings and decoration, and adjust its lightness until it passes.
Fixing audit findings
Automated audits such as Lighthouse flag low contrast text. Paste the reported colors here to see by how much they fail and test a replacement.
Checking states and dark mode
Hover, disabled and placeholder text, and every dark theme color, need their own check. Swap the colors to test inverted pairs quickly.