The quick brown fox jumps over the lazy dog

This is a subtitle paragraph demonstrating how normal body text looks with these colors. Good contrast ensures readability for all users, including those with visual impairments.

Article Heading (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Good design is obvious. Great design is transparent." — Joe Sparano

Visit our documentation page for more information on color accessibility standards. See also the WCAG guidelines.

Fig. 1 — Caption text shown at small size. Should be legible even at reduced size.

Code Example

Use the contrast-ratio() function to calculate accessibility scores.

const ratio = (lighter + 0.05) / (darker + 0.05);
const aaPass = ratio >= 4.5;
const aaaPass = ratio >= 7.0;