color-contrast

Color contrast keeps text and images of text legible for people with low vision and others who struggle to distinguish colors. If the ratio is too low, content can become unreadable. Normal text needs a ratio of at least 4.5:1. Large text, meaning at least 24px or 18.66px when bold, needs at least 3:1. This automated check measures rendered text, not images of text, which need manual review. Decorative content and disabled controls are exempt.

Pass Patterns

Sufficient contrast between text and background

Black text on a white background reaches a 21:1 ratio, far above the 4.5:1 minimum.

<button style="color: #000000; background-color: #ffffff;">
    Submit
</button>

Large text at the 3:1 threshold

The 24px heading and the 20px bold heading reach a 3:1 ratio, which meets the lower threshold for large text.

<main style="color: #ff7575; background-color: #1b1bfd;">
    <h2 style="font-size: 24px;">Frequently asked questions</h2>
    <h3 style="font-size: 20px; font-weight: 700;">Why does contrast matter?</h3>
</main>

Disabled control is exempt

The disabled button does not meet the ratio, but disabled controls are not required to.

<button disabled style="color: #e6e6e6; background-color: #a3a3a3;">
    Submit
</button>

Fail Patterns

Insufficient contrast between text and background

Gray text on a gray background gives about 1.6:1, well below the 4.5:1 minimum.

<button style="color: #777777; background-color: #999999;">
    Submit
</button>

WCAG techniques

Sufficient techniques

• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
• G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
• G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

Advisory techniques

• G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text

Failure techniques

• F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
• F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

ACT Rules

• Text has minimum contrast

Try It Yourself

Using a color contrast checker

1. Identify the text and its background color in the interface.
2. Open a browser extension or online color contrast checker.
3. Enter the foreground and background colors.

Expected results: The ratio is at least 4.5:1 for normal text, or at least 3:1 for large text.

Actual results: When the ratio is below these thresholds, the text fails.

Inspecting the browser dev-tools

1. Open the element inspector in your browser.
2. Select the element that contains the text.
3. Check the contrast information in the accessibility pane.

Expected results: The dev tools report a passing contrast ratio.

Actual results: When the ratio is below the threshold, the dev tools flag it as failing.

FAQ

Standards and Regulations

Personas impacted by this issue

• Low Vision
• Color Vision Deficiency

Related Issues

• text-contrast-on-compound-background