Color contrast
Also called contrast ratio, WCAG contrast, or text contrast
How much text stands out from its background, measured as a ratio from 1:1 to 21:1 and checked against the WCAG levels AA and AAA.
// WCAG relative luminance of a #rrggbb color.
function luminance(hex: string) {
const [r = 0, g = 0, b = 0] = [1, 3, 5].map((i) => {
const c = parseInt(hex.slice(i, i + 2), 16) / 255;
return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
});
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
function contrastRatio(a: string, b: string) {
const l1 = luminance(a);
const l2 = luminance(b);
return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}
type Props = { text: string; background: string };
export function ContrastCheck({ text, background }: Props) {
// Round down, never up: 4.48:1 still fails AA.
const ratio = Math.floor(contrastRatio(text, background) * 100) / 100;
const level =
ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : ratio >= 3 ? 'AA large' : 'Fail';
return (
<div
className='flex items-center justify-between gap-4 rounded-xl border p-4'
style={{ color: text, backgroundColor: background }}
>
<span>Your trial ends in 3 days</span>
<span className='rounded-full bg-white px-2 py-0.5 text-xs font-medium text-black tabular-nums'>
{ratio.toFixed(2)}:1 · {level}
</span>
</div>
);
}Audit the app’s text colors for WCAG contrast: compute the ratio of every text and background pair, and adjust any that fall below 4.5:1 for body text or 3:1 for text 24px and larger, icons, and input borders. Keep each hue and change only its lightness, and list every change with its old and new ratio.
Paste into Layerwise or any AI coding tool.
What is Color contrast?
A contrast ratio compares the relative luminance, or perceived brightness, of two colors. Black on white is 21:1, the maximum, and any color on itself is 1:1. The Web Content Accessibility Guidelines (WCAG) turn that number into pass and fail levels.
Level AA, the usual target, asks for at least 4.5:1 for normal text, and 3:1 for large text (24px, or about 19px bold), icons, and the outlines of controls. Level AAA asks for 7:1 for normal text and 4.5:1 for large text. Light gray placeholder text, white text on bright buttons, and text over photos are the most common failures.
Check contrast while you choose colors: browser dev tools show the ratio in their color pickers, and design tokens can pair each text color with the backgrounds it passes on. Never round up, because 4.48:1 still fails AA.
Related terms
All termsTypographic hierarchy
Using differences in text size, weight, and color so people can tell at a glance what to read first, second, and last.
Accent color
The one highlight color an interface uses for actions and selected states, and the CSS property that tints native form controls.
Dark mode
An alternate color theme with light text on dark backgrounds, chosen in settings or matched to the device’s system setting.
Focus ring
An outline that marks which element has keyboard focus, so people moving through a page with the Tab key can see where they are.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.