Color Contrast

Color contrast is the difference between the color of text or UI elements and their background.

It is important because users must be able to clearly read text and understand interface elements in different conditions.

Color Contrast = Difference between foreground color and background color

One-line idea: Color Contrast = Make text and UI elements visually clear enough to read and use in different conditions.

Core Concepts

Why It Matters

Good color contrast improves readability and accessibility.

It is especially important for users with:

• low vision
• color blindness
• low screen brightness
• bright light conditions
• visual strain

Poor contrast can make text hard to read and UI elements difficult to understand.

Readable contrast = Less strain + better usability

Contrast Ratio

Contrast ratio measures how different two colors are.

The higher the ratio, the easier it is to distinguish foreground content from the background.

Common ratios:

• 3:1
• 4.5:1
• 7:1

The required ratio depends on the type and size of content.

WCAG Contrast Requirements

WCAG defines minimum contrast requirements for text and UI elements.

Content Type	Minimum Requirement
Normal text	4.5:1
Large text	3:1
Bold text	3:1
Icons and graphs	3:1
UI elements	3:1

Normal text needs stronger contrast because smaller text is harder to read.

Large or bold text can use a lower ratio because it is easier to recognize visually.

Normal Text

Normal text should have at least:

4.5:1 contrast ratio

This applies to smaller text because it needs stronger visual separation from the background.

Example:

Small paragraph text on a white background needs enough dark contrast to remain readable.

Practical Examples

Large Text

Large text should have at least:

3:1 contrast ratio

Large text means:

• 18px and above
• or bold text around 14px and above

Larger text is easier to read, so the minimum contrast requirement is lower than normal text.

Enhanced Contrast

Enhanced contrast refers to a stricter accessibility level.

Text Type	Enhanced Requirement
Normal text	More than 7:1
Large text	More than 4.5:1

This is useful when targeting a higher level of accessibility.

UI Elements

Interactive UI elements also need enough contrast.

Examples:

• buttons
• input borders
• icons
• underlines
• graphs
• visual signifiers

For UI elements, the common minimum requirement is:

3:1 contrast ratio

A button can have readable text, but still fail accessibility if its border or important visual state has poor contrast.

Button Contrast

Button accessibility depends on more than only the text.

A good button should have:

• readable button text
• visible button boundary
• clear visual state
• enough contrast between button and background

Example:

Button text may pass contrast,
but button background or border may still fail.

So both text contrast and component contrast should be checked.

Behavior at High Zoom

Users may zoom content up to 200% or even 400% to improve readability.

At high zoom, accessibility depends on both contrast and layout behavior.

The page should still remain usable.

Important rules:

• text should stay readable
• contrast should remain clear
• content should reflow properly
• horizontal scrolling should be avoided
• elements should not overlap
• layout should not break

Good contrast at normal zoom is not enough if the layout breaks at high zoom.

Developer Practices

Use relative units so text can scale properly.

Prefer:

.title {
  font-size: 1.25rem;
}

Avoid depending only on fixed pixel values when scalable text is needed.

Developer Practices: Theme Support

Contrast should work in both light and dark themes.

Use system preference support when needed:

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #fff;
  }
}

This allows the interface to adapt based on user preference.

Color Contrast Table

Area	Rule
Normal Text	Minimum 4.5:1
Large Text	Minimum 3:1
Bold Text	Minimum 3:1
Icons and Graphs	Minimum 3:1
UI Elements	Minimum 3:1
Enhanced Normal Text	More than 7:1
Enhanced Large Text	More than 4.5:1
High Zoom	Text must stay readable and layout must not break

Summary

Color Contrast = Make text and UI elements visually clear enough to read and use in different conditions.

Normal text -> 4.5:1
Large text -> 3:1
UI elements -> 3:1
Enhanced contrast -> stronger ratios
High zoom -> readable text + stable layout
Themes -> contrast must work in both light and dark mode