MultiSwitch
SEARCH
MultiSwitch
Pick a text color and a background color to check their contrast ratio.
Text that doesn't stand out enough from its background is hard to read for people with low vision or colour blindness, on dim or glare-affected screens, and for anyone outdoors on a phone. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios so text stays readable for as many people as possible. Many organisations and public-sector sites are required to meet them.
Each colour is converted to its relative luminance (L), its perceived brightness from 0 for black to 1 for white, with green weighted most heavily because our eyes are most sensitive to it. The ratio is then:
Contrast ratio = (Llighter + 0.05) ÷ (Ldarker + 0.05)
Results range from 1:1 (identical colours) to 21:1 (black on white).
“Large” means at least 18pt (24px) regular, or 14pt (about 18.7px) bold.
Mid-grey #767676 on white works out at about 4.54:1. It just passes AA for normal text, and is roughly the lightest grey that does on a white background. One step lighter, #777777, drops to about 4.48:1 and fails. Light-grey placeholder text and pale brand colours on white are among the most common contrast failures.
AA is the standard most laws and policies refer to, and the practical baseline for websites and apps. AAA is stricter and worth aiming for on long-form reading text, but it isn't always achievable for every element.
Yes. WCAG 2.1 added a 3:1 minimum for meaningful non-text elements such as icons, form field borders and focus indicators against their surroundings.
Bright yellows, oranges, light greens and cyans have high luminance, so they sit too close to white. Use them for backgrounds with dark text on top, or darken the shade used for text.
Yes. The formula always puts the lighter colour on top, so swapping text and background gives the same ratio. Readability can still feel different (light-on-dark text often reads slightly bolder).