Accessibility text luminance contrast

Description

1) main heading luminance contrast must be >= 3:1.
2) Similarly, as large text, the numbers in yellow bullets must have >= 3:1 contrast. Dark yellow (E0A900) on light yellow (FBECC2) is 1.85:1.

3) Regular text must have >= 4.5:1 luminance contrast ratio. The smaller text over the Hero image (#767676) is too light vs the darker parts of the background image.

4) The small text under the bullets (QS World University Rankings, US News Best Colleges, US News Best Graduate Schools is 4.28:1 (would be >4.5:1 against white).

5) Similarly, "*Student fees billed by semester. Total cost varies depending on how long it takes to complete the degree program." and "*Application fee is $75" are too light against #f8f8f8 but would be ok against white.

Here's a luminance contrast calculator: https://webaim.org/resources/contrastchecker/

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
Alessandro Roux
July 5, 2018, 5:24 PM
Audrey Zecha
July 3, 2018, 1:48 PM

Thanks! I use Color Contrast Checker: (https://chrome.google.com/webstore/search/color%20contrast%20checker) but I'll check these out!

Jeff Witt
July 3, 2018, 8:55 AM

By the way, I have found that this Chrome extension is unique in showing luminance contrast using the full perimeter of text, which is super useful with text that is on top of background images (top one here): https://chrome.google.com/webstore/search/color%20contrast%20analyzer?hl=en-US

Audrey Zecha
July 2, 2018, 5:16 PM

Alright, here are UX's suggestions, corresponding to the numbering above:

1) The main heading should be #4A4A4A and bold (font-weight: 700)
2) The numbers in the yellow circles should be the same #4A4A4A
3) The smaller text in the header should be the same color, #4A4A4A, bold (font-weight: 700), and font size 20pt (1.6em)

for 4) and 5), the background of the page should be white - the main page background and sticky header background will have to be changed separately but both should be white.

Let me know if you have any questions.

Olga Stroilova
July 2, 2018, 3:52 PM

cc

Assignee

Alessandro Roux

Reporter

Jeff Witt

Labels

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Story Points

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Priority

CAT-1