Category: Visual and Media Accessibility

Color Contrast Ratio

Also known as: Contrast Ratio, Color Contrast

Simply put

Color contrast ratio is a measure of the difference in relative luminance (brightness) between two colors, such as text and its background. The ratio ranges from 1:1, where the two colors are identical and provide no contrast, up to 21:1, the maximum contrast such as black text on a white background. Higher contrast generally makes content easier to perceive, particularly for people with low vision or color perception differences.

Formal definition

The color contrast ratio expresses the relationship between the relative luminance of two colors and ranges from 1:1 to 21:1. It is used within the Web Content Accessibility Guidelines (WCAG) to evaluate the legibility of text against its background. Under WCAG Success Criterion 1.4.3 Contrast (Minimum), a Level AA target, normal text is commonly expected to meet at least a 4.5:1 ratio and large text at least 3:1. The stricter WCAG Level AAA criterion (1.4.6 Contrast Enhanced) calls for at least 7:1 for normal text and 4.5:1 for large text. WCAG defines large text as approximately 18 point (about 24 CSS pixels) or 14 point bold (about 18.66 CSS pixels) and larger. Contrast can be evaluated with tools that compute the ratio between a specified foreground and background color; note that meeting a numeric threshold addresses only one aspect of visual accessibility and does not by itself guarantee overall usability or legal compliance.

Why it matters

Color contrast ratio directly affects whether people can read and understand content. Text that is too close in luminance to its background can be difficult or impossible to perceive, particularly for people with low vision or color perception differences, as well as for anyone reading in challenging conditions such as bright sunlight or on a dim display. Because contrast can be measured numerically, it is one of the more objective and testable aspects of visual accessibility, which is why it features prominently in the Web Content Accessibility Guidelines (WCAG).

Contrast requirements are commonly cited in accessibility evaluations because they map to specific WCAG success criteria. Success Criterion 1.4.3 Contrast (Minimum), a Level AA target, is often referenced as a benchmark, and WCAG conformance at Level AA is the level most frequently used as a goal in accessibility programs. Insufficient contrast is also among the categories of issues that automated tools can reliably detect, so it is frequently among the first problems flagged during a review.

That said, meeting a numeric contrast threshold addresses only one aspect of visual accessibility. It does not by itself guarantee that content is usable for all users, nor does it guarantee legal compliance. Contrast should be evaluated alongside manual testing, assistive technology testing, and broader usability considerations. This entry describes technical guidance and is not legal advice; organizations with compliance questions should consult qualified legal counsel and current agency rulemaking.

Who it's relevant to

UX and Visual Designers

Designers make the color choices that determine contrast. Selecting text and background combinations that meet WCAG thresholds, and verifying them with a contrast checker during design, helps ensure content is legible before it reaches development.

Front-End Developers

Developers implement colors in CSS and are responsible for confirming that rendered text meets the intended contrast ratios, including states such as hover, focus, and disabled elements, where contrast can unintentionally fall below targets.

Accessibility Engineers and Testers

Contrast is one of the more objective, tool-detectable criteria, making it a common early check in an evaluation. Testers should treat automated results as a starting point and combine them with manual and assistive technology testing, since a passing ratio addresses only one aspect of visual accessibility.

Compliance Officers and Legal Counsel

Those responsible for accessibility programs often reference WCAG Level AA, including Contrast (Minimum), as a benchmark. Note that meeting a contrast threshold does not by itself guarantee legal compliance, and requirements evolve through regulation and case law; consult qualified legal counsel for specific situations.

Content Authors and Editors

People who add text over images, colored panels, or branded backgrounds can inadvertently create low-contrast content. Understanding contrast helps authors choose readable combinations and know when to verify them with a checker.

Inside Color Contrast Ratio

Contrast Ratio

A measure of the relative luminance difference between two colors, typically foreground text and its background, expressed as a ratio ranging from 1:1 (no contrast) to 21:1 (maximum contrast, such as pure black on pure white).

Relative Luminance

The calculated brightness of a color as defined by WCAG, used as the basis for computing contrast ratios rather than a simple comparison of color values or hues.

Normal Text Threshold (WCAG 2.x, Level AA)

Success Criterion 1.4.3 Contrast (Minimum) commonly cites a minimum contrast ratio of 4.5:1 for normal-size text at Level AA.

Large Text Threshold (WCAG 2.x, Level AA)

For large text, a minimum contrast ratio of 3:1 is generally cited. WCAG defines large text as at least 18 pt (approximately 24 px) or 14 pt bold (approximately 18.66 px).

Enhanced Contrast (Level AAA)

Success Criterion 1.4.6 Contrast (Enhanced) sets higher targets, commonly cited as 7:1 for normal text and 4.5:1 for large text, at Level AAA.

Non-Text Contrast

Success Criterion 1.4.11 Non-text Contrast, added in WCAG 2.1, addresses a minimum 3:1 contrast for user interface components and meaningful graphical objects, distinct from text contrast requirements.

Common questions

Answers to the questions practitioners most commonly ask about Color Contrast Ratio.

Does passing the color contrast ratio requirement mean my design is fully accessible?

No. Meeting a contrast ratio threshold addresses only one aspect of accessibility, the legibility of text and certain visual elements against their background. It does not guarantee an accessible experience for all users, since factors such as keyboard operability, screen reader compatibility, focus visibility, and cognitive load fall outside this single criterion. Contrast checks are also only a portion of what WCAG covers, and automated tools detect only some issues. Manual review and testing with assistive technology are generally needed to evaluate overall accessibility.

Is a color contrast ratio requirement legally mandated by the ADA?

The ADA is a US civil rights law and does not itself contain detailed technical specifications such as contrast ratios. Contrast requirements are defined in WCAG, published by the W3C through the Web Accessibility Initiative. Courts, settlements, and some agency guidance have often referenced WCAG as a benchmark, and Section 508 incorporates WCAG for federal contexts, but the ADA statute does not codify a specific ratio. Whether and how a particular threshold applies to your organization depends on jurisdiction, the applicable authority, and evolving case law and rulemaking, so qualified legal counsel should be consulted. This is not legal advice.

What contrast ratios does WCAG commonly cite for text?

At Level AA, WCAG generally cites a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. At Level AAA, the enhanced thresholds are commonly cited as 7:1 for normal text and 4.5:1 for large text. AA is the level most frequently referenced as a target in settlements and guidance, though the applicable target may vary by context.

How does WCAG define 'large text' for the purposes of the lower contrast threshold?

WCAG defines large text as text that is at least 18 pt (approximately 24 px) or 14 pt bold (approximately 18.66 px). Text meeting these size thresholds may use the lower large-text contrast ratios rather than the ratios required for normal-size text. Point-to-pixel equivalents are approximate and can depend on rendering context.

Does the contrast requirement apply to elements other than text?

In addition to text and images of text, WCAG addresses the contrast of non-text elements, such as user interface component boundaries and meaningful graphical objects, through a separate success criterion that was added in WCAG 2.1, which commonly cites a 3:1 ratio. This is distinct from the text contrast criteria, so the applicable threshold depends on which element and which success criterion is being evaluated.

How should contrast be measured for text placed over images or gradients?

Because contrast is calculated between the text color and the background color behind it, text over an image or gradient can present varying contrast across the element. Evaluators generally check the least favorable areas where text overlaps the background to determine whether the required ratio is met throughout. Techniques such as adding a solid or semi-opaque overlay, a text container, or a shadow are commonly used to maintain sufficient contrast, and manual review is often needed since automated tools may not reliably assess text over variable backgrounds.

Common misconceptions

Contrast ratio is simply the difference between two color values or hues.

Contrast ratio is calculated from the relative luminance of the colors, not from a direct comparison of hues or raw color codes. Two colors that appear different in hue can still fail contrast requirements if their luminance is similar.

Meeting the WCAG contrast ratios guarantees an accessible or legally compliant experience.

Passing contrast thresholds addresses one aspect of accessibility. It does not guarantee overall usability for all users or immunity from legal claims. Automated tools detect only a portion of issues, and manual and assistive technology testing remain necessary. This is not legal advice.

The large-text threshold applies to any text a designer considers prominent.

WCAG defines large text specifically as at least 18 pt (approximately 24 px) or 14 pt bold (approximately 18.66 px). Text that does not meet these size definitions is treated as normal text and must generally meet the higher 4.5:1 ratio at Level AA.

Best practices

Verify text contrast against the applicable WCAG success criterion and conformance level, commonly targeting at least 4.5:1 for normal text and 3:1 for large text at Level AA.

Apply the correct large-text definition when selecting a threshold, confirming text is at least 18 pt (approximately 24 px) or 14 pt bold (approximately 18.66 px) before using the 3:1 ratio.

Use contrast-checking tools based on relative luminance rather than judging contrast by hue or appearance alone.

Include non-text elements such as UI components and meaningful graphics in contrast evaluation, per Success Criterion 1.4.11 introduced in WCAG 2.1.

Supplement automated contrast checks with manual review and assistive technology testing, since automated tools detect only part of the potential issues.

Document which WCAG version and level you are conforming to, and consult qualified counsel for questions about legal obligations, as requirements evolve through regulation and case law.