Link color contrast on dark backgroud - Githubissues

mpaiva / CRDC-DSRC

Accessibility Assessment for Civil Rights Data Collection Data Submission Resource Center

0 stars 0 forks source link

Link color contrast on dark backgroud #5

Open mpaiva opened 6 months ago

mpaiva commented 6 months ago

Links on hover don't have enough color contrast on dark background

SC 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 requirement.

NOTE: Even though this is part of the logo, it is still perceived as a text link by the low-vision user.

How to fix:

Change color links to #008bef for text that are on dark background

.usa-navbar a:hover {
    color: #008bef;
}

Before:

After: