Embedded Files
Learning Goal
Learning Goal
Apply an accessibility tool to follow WCAG standards for text and background contrast in an online learning environment
The Ishihara test uses colored dots of random-appearing dots and sizes. People with standard color vision will be able to percieve a number within the image. Those with color deficiency will not.
Proper WCAG contrast ratios help people with color blindness to perceive content.
Image source: Wikipedia
Instructional Content
Instructional Content
Learning Objective
Learning Objective
Identify three reasons why contrast is an important principle in accessible design
Use a contrast checker to find accessible text and background color combinations
Learning Content
Learning Content
Contrast is an important aspect of accessible design. Maintaining a high contrast between the text and the background ensures that the content is perceivable to people with low vision or color blindness. It also helps standard users read easier, especially in low light environments or when using older screens.
Contrast Standards
Contrast Standards
WCAG guidelines recommend that for normal text, you have a minimum contrast ratio of 4.5:1 to meet Level AA accessibility standards. For text larger than 18 points (or 14 points bolded), a 3:1 contrast ratio is acceptable. Designers can check the contrast levels of their color combinations using a tool like WebAIM's contrast checker.
You should always check contrast colors of your design, especially for situations like text on colored backgrounds, gradients, or over photographs.
Lesson Activity
Lesson Activity
Contrast is an important element of accessible design. In this exercise, you will learn more about choosing accessible combinations and checking their contrast.
Instructions:
Instructions:
Select five different colors by HEX code, using a tool like HTML Color Codes if necessary.
Using the WebAIM contrast checking tool, create five accessible text and background options using your chosen color palette. Make sure your combinations pass Level AA standards with a minimum of 4.5:1 contrast.
For each pairing, identify the following:
The colors you selected by HEX code, including which is the background and which is the text.
The color contrast ratio
The method used to determine the score
Example:
Example:
Text: #000003A
Background: #FFFFFF
Color Contrast Ratio: 19.79:1
Verified with WebAIM Color Checker
Page updated
Report abuse