Color & Contrast

Understanding Color & Contrast

Accessible color and contrast help visitors distinguish text, links, controls, states, and other important information on a webpage.

Color is an important part of web design, but differences in vision, color perception, display quality, lighting, and user settings can affect how colors are perceived. Sufficient contrast and additional visual cues help ensure that information does not depend on a visitor seeing a particular color.

Why Contrast Matters

Contrast is the visual difference between foreground content and its background. When the difference is too small, text and interface components can become difficult to distinguish.

Good contrast is especially important for visitors with low vision or reduced contrast sensitivity, but it can benefit everyone. A screen viewed outdoors, a dim display, glare, poor lighting, or a low-quality monitor can make weak contrast difficult to read even for someone with otherwise good vision.

Accessibility should therefore be considered when choosing foreground and background colors rather than treating contrast as a purely visual design preference.

Understanding Contrast Ratios

Contrast between two colors can be expressed as a ratio ranging from 1:1 to 21:1. A ratio of 1:1 means there is no contrast between the colors, while 21:1 represents the maximum contrast between black and white.

Contrast ratios are calculated from the relative luminance of the foreground and background colors. Because the calculation is based on luminance rather than simply comparing hexadecimal values, a contrast checker is the easiest way to evaluate a color combination accurately.

Text Contrast Requirements

Under WCAG Level AA, ordinary text should have a contrast ratio of at least 4.5:1 against its background.

body {
  color: #333333;
  background-color: #ffffff;
}

The requirement applies to text that communicates information, including paragraph text, navigation labels, button text, form labels, and other meaningful textual content.

WCAG Level AAA uses a higher contrast requirement of at least 7:1 for ordinary text. Not every website is required to meet AAA, but stronger contrast can improve readability when it works with the overall design.

Large Text

WCAG allows a lower minimum contrast ratio of 3:1 for large-scale text because larger characters are generally easier to distinguish.

For WCAG contrast requirements, large-scale text is at least 18 point regular text or at least 14 point bold text. In CSS terms, those sizes are approximately 24px regular or 18.66px bold when using the common CSS conversion of 1 point to approximately 1.333 pixels.

Do not reduce contrast merely because text appears visually prominent. Meeting the minimum requirement is a baseline, and additional contrast may still improve readability.

Non-Text Contrast

Contrast is also important for visual information needed to identify user interface components and understand graphical objects. Under WCAG Level AA, relevant visual information generally needs a contrast ratio of at least 3:1 against adjacent colors.

This can include input boundaries, checkbox indicators, focus indicators, and meaningful portions of icons or graphics when those visual details are necessary to identify or understand the component.

input {
  border: 2px solid #595959;
  background-color: #ffffff;
}

Not every decorative border or graphic must meet this requirement. The important question is whether the visual information is necessary for someone to identify a control, state, or meaningful graphical object.

Do Not Rely on Color Alone

Color should not be the only way important information is communicated. Some visitors cannot distinguish particular colors, and others may use displays or settings that alter their appearance.

For example, marking a required field only by changing its label to red does not provide the same information to someone who cannot distinguish that color.

<label for="email">Email Address (required)</label>
<input type="email" id="email" name="email" required>

Color can still reinforce the message, but visible text, patterns, icons with understandable meaning, or other cues should provide the necessary information as well.

Link Colors

Links should remain visually distinguishable from surrounding text so visitors can recognize which content is interactive. Underlining is a familiar way to provide this distinction without relying entirely on color.

a {
  color: #005ea8;
  text-decoration: underline;
}

If color alone distinguishes links from surrounding text, additional contrast requirements between the link and surrounding text apply, and a non-color visual cue must appear when the link receives focus or pointer interaction. Keeping links underlined within ordinary text is often the simpler and clearer approach.

Link states should also maintain sufficient contrast against their backgrounds. A visited, hover, or focus color should not become difficult to read simply because it represents a different state.

Form Errors and Status

Form validation is a common place where color alone can create accessibility problems. Changing an input border to red may visually suggest an error, but it does not explain what happened or how to correct it.

<label for="email">Email Address</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<p id="email-error">Error: Enter a valid email address.</p>

Color can reinforce the error visually while the text communicates the same information directly. Similar principles apply to success messages, warnings, selected states, charts, and other information that might otherwise depend entirely on color.

Placeholder and Disabled Content

Placeholder text is often styled with low contrast, which can make examples or hints difficult to read. When placeholder text provides useful information, make sure its styling remains readable and do not use it as a substitute for a visible form label.

<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="555-123-4567">

Disabled controls and other inactive interface components are treated differently by WCAG contrast requirements, but their appearance should still make sense within the interface. Avoid making useful information unnecessarily difficult to perceive simply because a control is unavailable.

Testing Color and Contrast

Do not rely on visual judgment alone to determine whether two colors provide sufficient contrast. A color combination that looks readable on one monitor may not meet the required contrast ratio.

Contrast-checking tools can calculate the ratio between foreground and background colors and indicate whether the combination meets applicable WCAG levels. Automated accessibility tools can also identify many contrast problems, although manual review is still useful for understanding how color communicates information throughout the interface.

It is also useful to review a page without color or with color-vision simulation tools. Important information should remain understandable when color differences are reduced or unavailable.

Color and Contrast Example

The following example uses readable foreground and background colors, underlined links, and a form error that communicates its meaning through text as well as color.

<h1>Garden Newsletter</h1>

<p>
  Read our <a href="/gardening-guide.html">Gardening Guide</a>
  before choosing your plants.
</p>

<label for="email">Email Address</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<p id="email-error">Error: Enter a valid email address.</p>

Try changing the foreground, background, link, and error colors in the editor. Notice how quickly readability changes, then use a contrast checker to verify the combinations rather than relying only on appearance.

Best Practices

• Provide at least 4.5:1 contrast for ordinary text when meeting WCAG Level AA.
• Provide at least 3:1 contrast for large-scale text when meeting WCAG Level AA.
• Provide sufficient contrast for visual information needed to identify controls and meaningful graphical objects.
• Do not communicate important information through color alone.
• Keep links visually distinguishable from surrounding text.
• Check normal, visited, hover, focus, and other meaningful interface states.
• Combine color-coded form errors with clear explanatory text.
• Keep useful placeholder text readable and provide visible form labels.
• Use a contrast-checking tool instead of judging color combinations only by sight.
• Review the page with reduced or altered color perception to identify information that depends too heavily on color.

Summary

Accessible color and contrast make text and important interface information easier to perceive. WCAG provides measurable contrast ratios for text and certain non-text content, giving developers a reliable way to evaluate color combinations.

Contrast is only part of accessible color use. Important information should not depend on color alone, links should remain recognizable, errors should include meaningful text, and different interface states should remain readable and understandable.