Center-for-Digital-Narrative / elmcip

Electronic Literature as a Model of Creativity and Innovation in Practice (ELMCIP) is a collaborative research project funded by Humanities in the European Research Area (HERA) JRP for Creativity and Innovation built in Drupal
https://elmcip.net
4 stars 0 forks source link

Increase Contrast #492

Open hannahackermans opened 1 year ago

hannahackermans commented 1 year ago

WCAG Guidelines (this issue crosses several requirements)

Success Criterion 1.4.3 Contrast (Minimum) (Level AA) The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Logotypes Text that is part of a logo or brand name has no contrast requirements

Success Criterion 1.4.11 Non-text Contrast (Level AA) The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author; Graphical Objects Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Current State of ELMCIP

Contrast is okay in general but (just) too low for some of the buttons and tabs. The text on the header for logged-in users has too little contrast when using keyboard focus, meaning that it easy to lose sight of where you are on the website.

Proposed changes to meet the success criteria

1) Increase contrast for tabs and buttons. 2) Perhaps increase the contrast between color of regular text and color of hyperlinks, but the hyperlinks also requires non-color indication (see #491)