Add a11y friendly default text-colors when selecting a background-color.

WordPress / twentytwenty

Twenty Twenty is included in Core as of WordPress 5.3 🎉 To report any issues, please go here: https://core.trac.wordpress.org/newticket

Other

301 stars 140 forks source link

Add a11y friendly default text-colors when selecting a background-color. #995

Closed allancole closed 5 years ago

allancole commented 5 years ago

Before:

2019-11-11 16 49 24

After:

2019-11-11 16 48 14

Related Tickets

Fixes: #964

joyously commented 5 years ago

Don't the color settings change in the palette when you change the colors in the Customizer? So setting the text color is only good for the defaults? Wouldn't it be better to make the text color work regardless of background color?

allancole commented 5 years ago

Group Blocks and any block that uses any of the .has-background-xxxxxxx-color utility classes are also fixed with this PR. Here’s a gif of it working with this fix:

2019-11-11 17 03 36

mapk commented 5 years ago

I just tested this in FF 70.0.1 and am seeing the a11y warning still. Is this right?

contrast 2019-11-11 14_32_50

mapk commented 5 years ago

So double checking the contrast on these color combinations:

RED (#cd2653) & WHITE (#FFF) – 5.25 contrast ratio
BLACK (#000) & TAN (#f5efe0) – 18.30 contrast ratio
DARK GRAY (#6d6d6d) & WHITE (#FFF) – 5.17 contrast ratio

Looks like something may be off with the contrast warning in Gutenberg?

joyously commented 5 years ago

I tried it with changed colors. Peek 2019-11-11 16-48

audrasjb commented 5 years ago

Hi, For what it worth, I tested the PR on my side, and it looks good to me. Changing background color is automatically changing the font color when needed.

audrasjb commented 5 years ago

5e7ff2db531ab3c9150268adb25fc914