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
For review
Impact
Serious
Category
Color
WCAG criteria
Guidance
Deque University

6 potential issues across 8 pages

#1

What to review

  • Element's background color could not be determined because it is overlapped by another element

Where to look

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/tables-table-nested-within-table-header.html

    HTML node 
    <th>Holiday
<table>
<tbody><tr>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Accommodation</td>
<td>£499.99</td>
</tr>
<tr>
<td>Travel</td>
<td>£109.99</td>
</tr>
</tbody></table>
</th>
    CSS selector 
    tr:nth-child(3) > th

#2

What to review

  • Element's background color could not be determined because it is overlapped by another element

Where to look

We found occurrences on 3 pages:

  1. alphagov.github.io/accessibility-tool-audit/tests/tables-table-nested-within-table.html

    HTML node 
    <td>Holiday
<table>
<tbody><tr>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Accommodation</td>
<td>£499.99</td>
</tr>
<tr>
<td>Travel</td>
<td>£109.99</td>
</tr>
</tbody></table>
</td>
    CSS selector 
    main > table > tbody > tr:nth-child(3) > td:nth-child(1)

  2. alphagov.github.io/accessibility-tool-audit/tests/forms-error-messages-no-suggestion-for-corrections-given-e.g.-required-format.html

    HTML node 
    <label class="required-format-not-given">
            Phone number
            <span class="error-message">is not valid</span>
<input class="has-errors" pattern="7[0-9]{9}" required="" type="tel">
</label>
    CSS selector 
    label

  3. alphagov.github.io/accessibility-tool-audit/tests/css-page-zoom-boxes-that-dont-expand-with-the-text.html

    HTML node 
    <div class="wont-expand-box">
    CSS selector 
    div

#3

What to review

  • Element's background color could not be determined due to a background image

Where to look

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/images-background-image-that-conveys-information-does-not-have-a-text-alternative.html

    HTML node 
    <div class="warning-icon">
            Taking too much of your pension money in early retirement could mean you don't have enough for later.
        </div>
    CSS selector 
    div

#4

What to review

  • Element's background color could not be determined because it is overlapped by another element

Where to look

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/multimedia-flashing-content-doesnt-have-warning.html

    HTML node 
    <div class="ytp-impression-link-text">Watch on</div>
    CSS selectors 
    iframe;
.ytp-impression-link-text

#5

What to review

  • Element's background color could not be determined due to a background image

Where to look

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/html-invalid-aria-role-names.html

    HTML node 
    <a href="/">Home</a>
    CSS selector 
    a[href="/"]
    HTML node 
    <a href="/browse/housing-local-services">Housing and local services</a>
    CSS selector 
    a[href$="housing-local-services"]

#6

What to review

  • Element's background color could not be determined because element contains an image node

Where to look

We found occurrences on 1 page:

  1. alphagov.github.io/accessibility-tool-audit/tests/html-object-not-embedded-accessibly-wmode-parameter-not-set-to-window.html

    HTML node 
    <object data="foo"><param name="wmode" value="transparent">Alternative text</object>
    CSS selector 
    object