Copy your palette.

FAQ

  • What's the difference between headings and body text?

    "Headings" is the word we use for the W3C's categorization "large scale text", which includes normal weight text sized at 16pt or larger or bold text sized at 14pt or larger. "Body text" means text smaller than these thresholds.

    Per Criterion 1.4.3 Contrast (Minimum), the minimum contrast ratio to meet the AA standard is 4.5:1 for body text and 3:1 for headings. Criterion 1.4.6, required for AAA conformance, recommends ratios of 7:1 for body text and 4.5:1 for headings.

  • Do color contrast requirements apply to non-text elements like borders and shadows?

    Criterion 1.4.11 Non-Text Contrast recommends a contrast ratio of 3:1 for user interface components (such as a modal, button, or icon) and graphics crucial to understanding page content. It does not apply to elements that are purely decorative.

  • What about an inactive button or form field? It's hard to indicate an element is disabled without using low contrast!

    Actually, color contrast requirements DO NOT apply to disabled or inactive user interface elements. Per WCAG 2.1 Criterion 1.4.3:

    Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

  • I found this one ugly color combination that passes contrast requirements, but I think this other combination looks more readable. Does this mean the contrast requirements are garbage and I don't have to follow them?

    Nope! You probably just found a bad combination. The goal is legibility for all, not aesthetics for some. WCAG's color contrast ratios are based on several years' worth of research into text legibility.

  • But it looks ugly.

    You're a designer. Pick a different color combination. There are 16,777,216 possible web colors out there.

  • I have a colorblind friend who uses their computer/browser in high contrast mode. Does that mean I don't have to follow contrast requirements?

    No.

    Some users do use high contrast mode to automatically adjust the colors of documents, websites, and applications, but that doesn't mean all users with visual impairments use it. Just like you wouldn't require users to view your content with a specific device or browser, you also shouldn't require them to use high-contrast mode. Besides, high-contrast mode can change your colors in unexpected ways. It's safer to just pick a good palette from the getgo.

  • Who made this?

    Chromatopia was made by Pulp, a Cambridge, MA based technology firm specializing in web accessibility.