search

readium / readium-js-viewer

👁 ReadiumJS viewer: default web app for Readium.js library
BSD 3-Clause "New" or "Revised" License
553 stars 186 forks source link

Text Color contrast issues with different themes #363

Open becka11y opened 9 years ago

becka11y commented 9 years ago

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 commented 8 years ago

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 commented 6 years ago

Related issue: https://github.com/readium/readium-js/issues/187