Landing Nav

Sticky Header

Breadcrumb

Text Contrast

Half-filled circle icon split diagonally, inside a blue circular border.

Overview

Color contrast is the noticeable brightness difference between two colors. The contrast between text color and background color is measured as a ratio, which ranges from 1:1 (e.g., white on white) to 21:1 (e.g., black on white). To meet minimum contrast requirements, most text needs a contrast ratio of at least 4.5:1. If text is at least 18pt, or 14pt and bold, this requirement drops to 3:1.

 

Why Text Contrast Matters

Good contrast makes text easier to see and read in any situation, but there are some situations where it can be especially helpful. This could be a temporary situation like reading a page outdoors on a sunny day or a permanent condition related to age, vision loss, or other disability.

Tips for Success

  • Choose colors that provide good contrast. Blue is usually easier to read on a light background, followed by greens or purples. Reds, oranges, and yellows usually have poor contrast on a light background.
  • Use simple backgrounds behind text—solid background colors are usually best.
  • When appropriate, use larger text.
  • When working with unfamiliar colors, use a contrast testing tool to make sure that colors meet WCAG requirements.
  • Avoid busy backgrounds and very thin fonts.

Text Contrast in Practice

At Lincoln Elementary School, Mr. Ramirez, a 3rd grade teacher, noticed that one of his students, Jordan, often squinted at the screen during lessons and hesitated to participate in reading activities. Jordan, a bright and curious student with mild dyslexia, found it difficult to distinguish letters and words when they were displayed in low-contrast colors, such as gray text on a white background. Mr. Ramirez redesigned his digital materials using higher contrast text: white letters on a deep navy background.

A teacher stands at the front of a 3rd grade classroom, presenting a high-contrast slide with white text on a dark blue background about dolphins. Several students sit facing the display as the teacher gestures toward the screen while holding a tablet.

The difference was immediate. Jordan began reading aloud more confidently and completing assignments faster. This adjustment in text contrast not only supported Jordan’s learning but also created a more inclusive classroom where every student could engage with the material more effectively.

 

This material was sourced and adapted from NCADEMI (National Center on Accessible Digital Educational Materials & Instruction).  Accessibility Basics © 2025 by NCADEMI is licensed under CC BY-SA 4.0.