search

AlaskaAirlines / auro-lockup

Custom element that ....
https://auro.alaskaair.com/components/auro/lockup
Apache License 2.0
0 stars 0 forks source link

auro-lockup: title has low color contrast #3

Closed geoffrich closed 3 years ago

geoffrich commented 3 years ago

Describe the bug

The title's text color uses the auro-color-brand-breeze-300 token (#00cff0). This has a contrast ratio of 1.87 on a white background which does not meet WCAG AA color contrast requirements of 4.5 : 1.

To Reproduce

Steps to reproduce the behavior:

  1. Run color contrast checker on title

Expected behavior

The color contrast meets WCAG AA requirements.

Screenshots

image

blackfalcon commented 3 years ago

Please see attached PDF. This is the design spec for the lockup. Whereas in the comp, the color specified is #00C7E6which is a slight shade darker than auro-color-brand-breeze-300 token (#00cff0)

Both well below the contract rating.

Suggestion: color spec be updated to use the var(--auro-color-brand-breeze-400) token. #009FB8 Contrast Ratio 3.16:1. This passes the WCAG AA for large text only.

See http://lockup-issue3.surge.sh/ for a demo

Attached PDF of the original design spec EE_Lockup.pdf

blackfalcon commented 3 years ago

PR created to illustrate options. Email sent to Sr designers to assist in addressing this issue.

blackfalcon commented 3 years ago

@vidalmenAS any support on this would be appreciated.