What the ratio means
Contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). WCAG — the accessibility standard most laws reference — requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold) at the AA level; AAA tightens those to 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1.
Fixing a failing pair
Darken the text or lighten the background — lightness moves the ratio far faster than hue does. Classic traps: gray-on-white body text below #767676 fails AA; white text on brand yellows and light greens almost always fails (flip to dark text); and thin fonts need more contrast than their ratio suggests. Roughly 1 in 12 men has some color-vision deficiency — contrast is how your text survives it.
Frequently asked questions
What contrast ratio do I need for normal text?
4.5:1 for WCAG AA — the level most regulations and lawsuits reference. Large text (18pt+/14pt bold) needs 3:1. AAA raises those to 7:1 and 4.5:1 for critical-audience content.
Is #777 gray text on white accessible?
Just barely fails: #777777 on white is about 4.48:1. #767676 is the famous exact-pass gray. If your body text is lighter than that on white, it fails AA.
Do these rules apply to placeholder text and disabled buttons?
Disabled controls are exempt; placeholder text is not — it must meet 4.5:1 like any other text, one of the most commonly failed audits since default placeholder grays are too light.
Does contrast checking cover color blindness?
Largely yes — the luminance-based ratio ignores hue, so any pair that passes remains readable under every type of color-vision deficiency. Just never use hue alone (red vs green) to encode meaning.