Skip to main content

Welcome to our new website! The content and organization have been heavily redone and we want to hear from you! 
Submit feedback

Color & Contrast Guidance

Ensuring visual accessibility through proper color use and contrast ratios.

🎨 WCAG 1.4.3 & 1.4.11

Why contrast matters

Sufficient color contrast ensures content is readable for people with:

  • Low vision: Affects 246 million people worldwide
  • Color blindness: 8% of men, 0.5% of women
  • Aging eyes: Contrast sensitivity decreases with age
  • Situational impairments: Bright sunlight, low-quality screens

Low contrast is the #1 accessibility issue on the web, affecting 83% of home pages (WebAIM Million 2024).

WCAG contrast requirements

Text contrast (WCAG 1.4.3 - Level AA)

Text typeDefinitionRequired ratio
Normal textUnder 18pt (24px) or under 14pt bold (19px)4.5:1 minimum
Large text18pt+ (24px+) or 14pt bold (19px bold)3:1 minimum
Incidental textInactive UI, decorative, logosNo requirement

Non-text contrast (WCAG 1.4.11 - Level AA)

UI components and graphics need 3:1 contrast against adjacent colors:

  • Form input borders
  • Buttons and controls
  • Focus indicators
  • Icons that convey information
  • Chart elements and data visualization

Enhanced contrast (Level AAA)

For maximum accessibility:

  • Normal text: 7:1
  • Large text: 4.5:1

Testing contrast

Online tools

ToolBest forLink
WebAIM Contrast CheckerQuick two-color checkwebaim.org/resources/contrastchecker
Coolors Contrast CheckerVisual previewcoolors.co/contrast-checker
Who Can UseSimulates vision conditionswhocanuse.com

Desktop applications

  • Colour Contrast Analyser (CCA): Free from TPGi — Includes eyedropper tool
  • Stark: Figma, Sketch, Adobe XD plugin

Browser extensions

  • WAVE: Shows contrast errors in page context
  • axe DevTools: Detailed contrast analysis
  • Accessibility Insights: Includes contrast checker

UA brand colors and accessibility

Primary UA colors

ColorHexOn whiteOn blackUsage notes
Arizona Red#AB05205.9:1 ✓3.5:1 ✓Safe for normal text on white
Arizona Blue#0C234B12.6:1 ✓1.7:1 ✗Excellent on white, not on black
Oasis#1E52886.8:1 ✓3.1:1 ✓Safe for normal text on white
Darker Red (Chili)#8B00158.2:1 ✓2.6:1 ⚠️Better contrast than Arizona Red

See the UA Brand Color Guide for full palette.

Problem combinations to avoid

  • Light gray text on white backgrounds
  • Red text on blue backgrounds (or vice versa)
  • Yellow or light blue on white
  • Green and red together (color blindness)

Don't use color alone

WCAG 1.4.1: Color cannot be the only way to convey information.

Problem examples

  • Red text for errors with no other indicator
  • Color-coded status without labels
  • Required fields marked only with red asterisks
  • Charts using only color to distinguish data

Solutions

  • Add icons or symbols (⚠️ ✓ ✗)
  • Include text labels
  • Use patterns in charts
  • Underline links (don't rely on color alone)
  • Add "(required)" text to mandatory fields
 

✗ Color only

Error: Invalid email

Success: Form submitted

✓ Color + text/icon

⚠️ Error: Invalid email

✓ Success: Form submitted

Designing for color blindness

Types of color blindness

TypeAffectsPrevalence
Protanopia/ProtanomalyRed perception~1.5% of men
Deuteranopia/DeuteranomalyGreen perception~6% of men
Tritanopia/TritanomalyBlue perception~0.01%
AchromatopsiaAll color (grayscale)~0.003%

Safe color combinations

  • Blue and orange
  • Blue and yellow
  • Varying lightness/darkness rather than hue
  • Using patterns or textures with colors

Testing for color blindness

Dark mode considerations

Many users prefer dark mode for reduced eye strain. Ensure contrast works in both modes:

  • Test both light and dark themes
  • Don't assume background color
  • Use CSS custom properties for theme switching
  • Ensure focus indicators work on dark backgrounds

Color & contrast checklist

  • check_box_outline_blank Normal text has 4.5:1 contrast
  • check_box_outline_blank Large text has 3:1 contrast
  • check_box_outline_blank UI components have 3:1 contrast
  • check_box_outline_blank Focus indicators are visible
  • check_box_outline_blank Color is not the only indicator
  • check_box_outline_blank Works for color blindness
  • check_box_outline_blank Links are distinguishable from text
  • check_box_outline_blank Charts have patterns or labels
  • check_box_outline_blank Tested with contrast checker tool

Resources