Web Happens

Accessibility Action report

Average Joe's

Back

Elements must have sufficient color contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

Status
Failed
Impact
Serious
Category
Color
WCAG criteria
Guidance
Deque University

4 issues across 5 pages

#1

How to fix

To fix the issue, you need to resolve this:

  • Element has insufficient color contrast of 4.37 (foreground color: #757980, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
Example
The quick brown fox jumps over the lazy dog.

Where to fix

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/colour-and-contrast-small-text-does-not-have-a-contrast-ratio-of-at-least-45-1-so-does-not-meet-aa.html

    HTML node 
    <p class="low-contrast-small-aa">This small text does not have enough contrast with it's background</p>
    CSS selector 
    p

#2

How to fix

To fix the issue, you need to resolve this:

  • Element has insufficient color contrast of 3.4 (foreground color: #878c8c, background color: #ffffff, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1
Example
The quick brown fox jumps over the lazy dog.

Where to fix

We found occurrences on 2 pages:

  1. alphagov.github.io/accessibility-tool-audit/tests/colour-and-contrast-large-text-does-not-have-a-contrast-ratio-of-at-least-31-so-does-not-meet-aa.html

    HTML node 
    <p class="low-contrast-large-aa">This small text does not have enough contrast with it's background</p>
    CSS selector 
    p

  2. alphagov.github.io/accessibility-tool-audit/tests/colour-and-contrast-large-text-does-not-have-a-contrast-ratio-of-at-least-45-1-so-does-not-meet-aaa.html

    HTML node 
    <p class="low-contrast-large-aa">This small text does not have enough contrast with it's background</p>
    CSS selector 
    p

#3

How to fix

To fix the issue, you need to resolve this:

  • Element has insufficient color contrast of 2.86 (foreground color: #9499a1, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
Example
The quick brown fox jumps over the lazy dog.

Where to fix

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/colour-and-contrast-small-text-does-not-have-a-contrast-ratio-of-at-least-71-so-does-not-meet-aaa.html

    HTML node 
    <p class="low-contrast-small-aaa">This small text does not have enough contrast with it's background</p>
    CSS selector 
    p

#4

How to fix

To fix the issue, you need to resolve this:

  • Element has insufficient color contrast of 1.24 (foreground color: #ffffff, background color: #fae1e1, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Example
The quick brown fox jumps over the lazy dog.

Where to fix

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/forms-errors-identified-with-a-poor-colour-contrast.html

    HTML node 
    <div class="validation-summary" role="alert">
                You need to fix the errors on this page before continuing.
            </div>
    CSS selector 
    div