This guide explains why color contrast matters and how to meet WCAG 2.1 AA accessibility standards. Learn the required contrast ratios, best practices for text and graphics, and how to test your colors using built-in D2L tools and external checkers.
- Normal Text: Must have a contrast ratio of at least 4.5:1 against its background (applies to standard body text under 18pt or bold text under 14pt).
- Large Text: Must have a contrast ratio of at least 3:1 against its background (applies to text 18pt or larger, or bold text 14pt or larger).
- UI Elements & Graphics: Essential visual components (icons, chart lines, input borders) must meet a minimum 3:1 contrast ratio.
- Never Rely Solely on Color: Color should never be the only indicator used to convey meaning (e.g., instead of stating "Click the green button," say "Click the green Submit button").
Note on Contrast Ratios:
A contrast ratio measures how much brighter text is compared to its background (on a scale from 1:1 for invisible text to 21:1 for pure black on white).
- High Contrast (4.5:1): Required for normal body text because small, thin letters need maximum brightness difference to remain readable.
- Medium Contrast (3:1): Required for large headings, bold titles, and visual icons because thicker letterforms and graphics are naturally easier for the eye to distinguish.
To maintain high readability across all course materials, avoid these frequent design errors:
- Light gray text on a white background.
- Yellow, neon green, or light orange text on white or light backgrounds.
- White text on light blue or light gray button/banner backgrounds.
- Relying solely on color to convey meaning (e.g., using red text alone to indicate required items—always use text labels like "Required" or an asterisk * alongside color).
When creating HTML documents or announcement posts inside D2L Brightspace, the rich text editor tests color contrast automatically:
- Open an HTML File from your D2L course and select Edit.
- Highlight your text and select a color using the Font Color picker.
- Look at the bottom of the color picker window for the Accessibility Check gauge.
- If the combination fails, D2L displays a red warning icon indicating the contrast ratio is too low. Adjust to a darker shade until a green checkmark appears.
Best for inspecting and fixing color contrast issues directly in PDF documents.
- Open your PDF in Adobe Acrobat Pro.
- In the sidebar or menu, select Prepare for Accessibility.
- Click Check for accessibility and then Start Checking.
- In the left-hand Accessibility Checker panel, expand Document to review any flagged contrast issues.
A Hex Code is a 6-digit code representing a specific color (for example, #000000 is pure black and #FFFFFF is pure white)
You can test the Hex Codes instantly on the free WebAIM Color Contrast Checker:
- Copy Your Color Hex Code:
- In D2L Brightspace: Highlight text ->click the Font Color icon ->go to the Custom tab ->copy the 6-character code next to #.
- In Word or PowerPoint: Highlight text ->click the Font Color dropdown ->select More Colors... -> go to the Custom tab ->copy the Hex code at the bottom.
- In Canva: Select text/shape -click the Color tile in the top toolbar -click + (Add new color) -copy the code below the slider.
- Open WebAIM: Go to webaim.org/resources/contrastchecker.
- Enter Color Codes:
- Paste your text color code into the Foreground Color box.
- Paste your page background color code into the Background Color box (use FFFFFF for a standard white page).
- Check Compliance Results: Scroll to the WCAG AA section:
- Normal Text: Must display a green Pass (minimum 4.5:1 ratio).
- Large Text: Must display a green Pass (minimum 3:1 ratio).
Tip: If it fails, adjust the light/dark slider directly on the WebAIM page until it passes, then copy the new hex code back to your document!
You are done. Great job!
0 Comments
Add your comment