Color Contrast

Contrast ratio measures the brightness difference between two colors, usually text and its background, expressed as a number from 1:1, identical and unreadable, up to 21:1, pure black on pure white. Higher ratios mean text is easier to read, which matters for anyone with low vision, older eyes, or a phone screen in bright sunlight. This is the same measurement accessibility guidelines and audits use to judge whether text is legible.

Designers picking a text and background color palette for a website, developers running an accessibility audit before launch, and marketers choosing colors for a button or banner that needs to stay readable for as many visitors as possible.

AA is a widely used accessibility target from the Web Content Accessibility Guidelines. It requires normal text to reach at least a 4.5:1 contrast ratio and large text at least 3:1.

AAA is a stricter level, requiring at least 7:1 for normal text and 4.5:1 for large text. Most projects target AA, while AAA is reserved for content where accessibility is especially critical.

Use 3-digit or 6-digit hex colors, with or without the leading hash sign, for both the text and background fields.

No. Hex colors are checked entirely in your browser.

No. Contrast ratio is one important factor, but readable font size, adequate spacing, and not relying on color alone to convey meaning also matter.