Inclusive-Design-Principles / inclusive-design-principles

5 stars 4 forks source link

Focus indicator colour is below 3:1 on page background (+ Includes other uses of the same orange) #20

Open dashouse opened 5 months ago

dashouse commented 5 months ago

Hello, first off love this site!

The colour #FCB316 only has a 1.81:1 contrast ratio with the page background (white).

As it is used for the primary focus state outline colour (with no other differentiator) I believe this fails to be an an adequate focus indicator (Focus appearance) as it's below 3:1 and has been overridden from the user agent style.

In some instances this colour is also used for states of interactive components like the button in tabs. Even though it's only on the hover state, I believe Non-text contrast is still appropriate here. Although the states themselves don't need to be differentiated I believe any state of an active user interface component still needs to meet 3:1.

This colour is also used as a "selected" state on the navigation and a hover state on links. This usage appears to be fine as it it doesn't matter if it's there or not as the underline is removed.