Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

WCAG 2.1: Buttons' inner background color has insufficient contrast against its adjacent background

See original GitHub issue

Describe the bug

For active controls such as buttons and form fields: any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors

To Reproduce Steps to reproduce the behavior:

Run assessment on any page
Open details view and start an assessment
Open the target page
Navigate to a new URL in the same tab
Run assessment once again
A dialog ‘Assessment in progress’ shows up in details view window
Observe both the Continue previous and Start new buttons have a background color that isn’t having enough contrast with the adjacent background

Expected behavior

The contrast ratio between the buttons’ background and the adjacent background should be at least 3:1

Screenshots

Extension

Accessibility Insights for Web - prod
Browser Version: Chrome 75.0.3770.80
Target Page: Any page

Did you search for similar existing issues?

Yes - #761

Issue Analytics

State:
Created 4 years ago
Comments:19 (13 by maintainers)

Top GitHub Comments

1reaction

ferBonnincommented, Jun 13, 2019

from the figma file, the border color is #666666 should be fine.

0reactions

iamrafancommented, Jan 22, 2020

@ferBonnin Yes, this issue has been fixed

Top Results From Across the Web

Understanding Success Criterion 1.4.11: Non-text Contrast | WAI

Figure 3 The contrast of the input background (white) and color adjacent to the control (dark blue #003366) is sufficient. There is also...

Getting WCAG color contrast right - UX Collective

It is also not required that a background or outline meets any contrast ratio, as long as there is a text (e.g. button...

Insufficient Color Contrast - Equalize Digital

Color contrast is important for all users. Without enough contrast between the foreground and background colors, users may find it difficult to read...

Exploring WCAG 2.1 — 1.4.11 Non-text Contrast - Knowbility

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):. User Interface Components: Visual ...

Text elements must have sufficient color contrast against the ...

Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it. Success Criterion: Ensure color ......