Skip to content

accessibility: color contrast for <h1> titles, <a> fail WCAG 2.0 minimum standards #941

Open
@weedySeaDragon

Description

@weedySeaDragon

There are two main styles* that do not meet the minimum level of contrast between the foreground and background:

  1. <h1> white foreground against a light blue background
  2. <a> light blue foreground against a white background does not meet the WCAG 2.0 minimum standards for color contrast

(* "main style" == heavily used in the website. Perhaps there are some other styles, but these are the two that are prominent in the few pages I checked.)

The definitions in style.css:


a {
  color: #23aad1;
  text-decoration: none;
  transition: all 350ms ease; }
  a:active, a:focus, a:hover {
    color: #DC322F;
    text-decoration: underline; }

...

.title-page {
  background: #5CC6E4;
  min-height: 200px; }
  .title-page h1 {
    font-size: 1.875rem;
    font-family: "Lato", sans-serif;
    padding-top: 40px;
    text-transform: uppercase;
    text-shadow: rgba(0, 43, 54, 0.1) 2px 2px 0;
    color: #fff; }

References:

Example of what the WAVE tool shows for the Getting Started page:

wcag-contrast-getting-started-wave-check

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions