Increase Contrast

[hannahackermans]

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 Add non-color indicator for links and errors #491)