Skip to content
This repository has been archived by the owner on Dec 8, 2017. It is now read-only.

Color Contrast Ratios #377

Open
xtine opened this issue Jun 10, 2016 · 8 comments
Open

Color Contrast Ratios #377

xtine opened this issue Jun 10, 2016 · 8 comments

Comments

@xtine
Copy link
Contributor

xtine commented Jun 10, 2016

CFR:
screen shot 2016-06-10 at 10 05 40 am

Write comment link
screen shot 2016-06-10 at 10 01 32 am

Write mode
screen shot 2016-06-10 at 10 00 37 am

Review page
screen shot 2016-06-10 at 9 59 12 am

@jehlers
Copy link

jehlers commented Jun 10, 2016

@xtine Can we change all of the gray text (deleted text in the CFR and helper text on the review page) to #767676. That should meet our ratios better.

For the write mode, if that gray bar is lighter, #f5f5f5, does that allow that blue to meet our contrast ratio?

We'll have to think a little bit about the right sidebar "write a comment" link. That's meant to be lighter because we don't want it to visually clutter up the page. It should meet the ratio on hover. But we can compromise somewhere in the middle.

And finally, for the review page blue on blue links. Are we using the #e1f3f8 as the background? Would switching to our dark blue (what we use for the tabs) for that one link help the contrast ratio? (Sorry the site I use to check this stuff isn't loading for me at this moment.)

@jehlers
Copy link

jehlers commented Jun 10, 2016

It loaded! Either blue should work if we use the lightest blue background! Can we stick with out normal link blue then?

screen shot 2016-06-10 at 1 20 08 pm 1

@jehlers
Copy link

jehlers commented Jun 10, 2016

@xtine can we use #457D9A for the write a comment links in the sidebar? It's a new color that is basically a de-saturated version of the main blue link. It gets us up to a 4.51 ratio. And then the hover color can still be the full main link blue.

@xtine xtine self-assigned this Jun 13, 2016
@xtine
Copy link
Contributor Author

xtine commented Jun 13, 2016

I got all of the color contrast ratios to work except for this one:

screen shot 2016-06-13 at 10 49 26 am

@jehlers
Copy link

jehlers commented Jun 13, 2016

@xtine Can we make that the dark gray #767676?

@xtine
Copy link
Contributor Author

xtine commented Jun 13, 2016

@jehlers: #767676 doesn't seem enough for the gray on blue:

The color combination #767676/#e1f3f8 has a contrast ratio of 3.97, which is not sufficient. At this size, you will need a ratio of at least 4.5.

@jehlers
Copy link

jehlers commented Jun 13, 2016

Woops, sorry about that. How about #666666? It should have a 5.02 ratio instead of just hitting the 4.5 mark.

@xtine
Copy link
Contributor Author

xtine commented Jun 13, 2016

@jehlers: yep, that works. thanks.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants