Contrast and color use are prerequisites to accessibility in design. Users, including individuals with disabilities, must be able to perceive content, which includes typography and information graphics. Universal Design is accessible and provides the same means of use for all users: identical whenever possible; equivalent when not. (Cook & Hussey, 2002; The Center for Universal Design, University of North Carolina 1997) The table below visually communicates good text contrast as defined by the Web Content Accessibility Guidelines (WCAG) 2.1. The WSU color branding text combinations below provide enough contrast between text and its background so that it can be read by individuals with moderately low vision. Contrast is calculated so color is not a key factor for individuals who have a color vision deficit will also have adequate contrast between the text and the background.
| Good text contrast examples | |||
|---|---|---|---|
| WSU primary green | WSU primary Yellow | Base grey | White |
White on WSU primary green Minimum contrast (AA) | Black on WSU primary yellow Minimum contrast ratio (AA) | Black on lighter grey Minimum contrast (AA) | Black on White Minimum contrast (AA) |
WSU primary yellow on WSU primary green Minimum contrast (AA) | WSU primary green on WSU primary yellow Minimum contrast (AA) | WSU primary green on lighter grey Minimum contrast (AA) | WSU primary green on white Minimum contrast (AA) |
Lightest green on WSU primary green Minimum contrast (AA) | Dark, darker and darkest green on WSU primary yellow Minimum contrast (AA) | Dark, darker and darkest green on lighter grey Minimum contrast (AA) | Dark, darker and darkest green on white Minimum contrast (AA) |
Lightest green on darker green Minimum contrast (AA) | WSU primary green on lighter yellow Minimum contrast (AA) | Darker grey on lighter grey Minimum contrast (AA) | Darker grey on white Minimum contrast (AA) |
WSU primary green on lightest green Minimum contrast (AA) | WSU primary green on lightest yellow Minimum contrast (AA) | Darkest grey on lighter grey Minimum contrast (AA) | Light green on white Minimum contrast (AA) |
- Minimum contrast (AA) - text has a contrast ratio of at least 4.5:1 for normal sized text (at least 8 points) and at least 3:1 for large scale text (at least 18 points regular and 14 points bolded) against adjacent colors.
- Enhanced contrast (AAA) - text has a contrast ratio of at least 7:1 for normal sized text (at least 8 points) and at least 4.5:1 for large scale text (at least 18 points regular and 14 points bolded) against adjacent colors.
- Non-text contrast, UI components and graphical objects (AA) - Visual presentation of user interface components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.
- Read more about web contrast accessibility guidelines, (WCAG) 2.1.
Refer to the WSU color branding chart on the FAQ page for hex/rgb color values. In addition to ensuring the contrast is readable, the size of the font also affects its legibility.
- Reading text on hand-held pages should be a minimum of 8 point font.
- Any posters that are meant to be read at a minimum distance, the following sizes are suggested:
- Title: 80 pt bolded
- Authors and affiliations: 54 - 60 pt
- Headings: 36 pt
- Body text: 24 - 32 pt
- Captions: 18 pt
- For readability, the following sizes are suggested for the body text:
- To be legible at 6 feet use 30 point.
- To be legible at 10 feet use 48 point.
- To be legible at 12 feet use 60 point.
- To be legible at 14 feet use 72 point.
- Text and figures should be readable from around 5-7 feet away
- Use a sans serif typeface (e.g., Lato, Arial, Open Sans, Helvetica, etc.). Our poster templates use the sans serif font Lato, which can be downloaded from the link provided on our FAQ page.
- To maximize readability, use a 1.4 or 1.5 line height (line height of 140%/150%, equal to 1.4/1.5 times the font size)