Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text Color contrast issues with different themes #363

Open
becka11y opened this issue Jun 18, 2015 · 2 comments
Open

Text Color contrast issues with different themes #363

becka11y opened this issue Jun 18, 2015 · 2 comments

Comments

@becka11y
Copy link
Contributor

The contrast between foreground and background colors do not meet the WCAG 2.0 AA guidelines for all selections.
Default, Arabian Nights and Parchment (sands of dune) do meet AA requirements for all text sizes.
Ballard and Vancouver do not meet AA below 18pt.

How were these colors selected? Was there an explicit choice made for a low contrast theme?
Here is the table of values as of June 18, 2015

BK FG Ratio Theme
333333 FFFFFF 12.63 Night (viewer.css)
141414 FFFFFF 18.42 Night (settings.css)
F7F1CF 774V27 6.48 Parchment (settings.css)
576B96 DDDDDD 3.92 Ballard (settings.css) - not AA compliant under 18 pt
DDDDDD 576B96 3.92 Vancouver (settings.css) - - not AA compliant under 18 pt

Suggested colors to bring Ballard into AA compliance: F2F1EF, FEFEFE, FFFFFF
Suggested colors to bring Vancouver into AA compliance: 406098, 16405B, 1460AA

Helpful color contrast tool: http://colorsafe.co

@becka11y
Copy link
Contributor Author

Currently testing 2E456D and 406098 as foreground and background for ballard and Vancouver. This puts them at a ratio 0f 4.67. Using DADFE1 in place of 406098 increases the ration to 7.14.

@danielweck
Copy link
Member

Related issue: readium/readium-js#187

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants