For training that enhances your effectiveness and inspires your students.

Patterned Navigation Buttons

Buttons that have patterned backgrounds, need to be solid with appropriate levels of visual contrast. Buttons on course navigation have patterned backgrounds that make reading the text on the button difficult for some students to see.


Example of Issue

Students who have difficulty perceiving color, students with partial sight and older students are having a hard time reading the text on the course navigation buttons due to the pattered background that does not create a clear visual contrast

Standard

Guideline 1.4 Distinguishable: The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
    1.4.6 Contrast (Enhanced (Level AAA)

Example of Standard in Action

Navigation buttons in course are patterned but have a contrast ratio of 7:1. Which means that the brightness level of the white areas in the button are 7 times brighter than that of the blacks. The larger the contrast ratio, the greater the difference between the brightest whites and the darkest blacks. Students in the class who have low vision, partial vision or difficulty perceiving color will be able to see the text because of the high level of visual contrast.

high contrast button

Locating the Issue in Your Course

Confirm that any patterned buttons used in your course have a clear visual contrast. To test the buttons used for sufficient contrast, you may use the Contrast Checker tool from WebAIM.

Resources to Align With Standard

Links to Related Articles

Leave a Reply