Text Contrast & Fonts

Overview

- Text contrast is the difference in luminance between text (or icons/lines) and its background. Strong contrast makes content readable on any device or projector and for learners with low vision or color‑vision differences. It’s a cornerstone of accessible design across slides, documents, LMS pages, and district websites.

- Students and families view materials in many settings—classrooms with bright lights, mobile phones, printed handouts, and projectors that wash colors out. Adequate contrast reduces eye strain and ensures information is readable for everyone, including students with low vision or color‑vision differences. It also supports districts’ obligations under ADA/Section 504.

Don’t rely on color alone—pair good contrast with clear type, size, and spacing.
Meet contrast targets for text, large text, and non‑text elements.
Avoid text on busy images—place text on a solid or semi‑opaque background.
Check links—if color alone differentiates links, also underline them and ensure sufficient contrast.
Test on the projector—colors that look fine on your laptop can fail on classroom displays.

Google Docs/Slides: Use Theme colors and test hex values with a contrast checker. For text over images, draw a shape, set fill to a school color at 80–90% opacity, and place text on top. Underline links and verify contrast in presentation mode.
Canvas (LMS): The RCE Accessibility Checker flags low contrast; avoid theme customizations that reduce contrast. For banners, place text in a solid color box.
Chromebook/Browser: Use a contrast‑checker extension or the WebAIM tool; sample colors with an eyedropper extension.

Typing plain text into your website is fine:
- Black/dark color text with a white/light background.
- White/light color text on a black/dark background
Do not use yellow, red, pastel or medium tone text colors.
If you really want to use colored fonts, use this free ADA Color Contrast Checker to make sure your font color is different enough from your background color.
Avoid fancy fonts and busy backgrounds.
- Do not put text on top of a background image.

Use standard fonts that are available on most devices.
Use only one or two font faces per website or document, for example one for headers and one for body text.
Using too many fonts creates a confusing visual layout, which is bad for all users, but may be especially difficult for users with disabilities.
Read more about accessible Typefaces and Fonts.

Simple Fonts:

WebAIM Contrast Checker
- This tool from WebAIM lets you test the contrast between a foreground (text) color and a background color to see whether they meet WCAG accessibility standards for readability.
- Use the WebAIM Contrast Checker »
Accessible Color Matrix (Toolness)
- An interactive prototype that helps designers experiment with color palettes and instantly see which combinations comply with accessibility contrast guidelines.
- Explore the Accessible Color Matrix »

Page updated

Report abuse