Check the text color constrast

[palemieux]

See #388 (comment)

@nigelmegitt to specify tool/criteria.

[nigelmegitt]

The BBC's Mobile Accessibility Guidelines suggest 3 tools:

• Snook.ca colour contrast check,
• Webaim color contrast checker or
• TPG colour contrast analyser

[nigelmegitt]

Using "normal" text for WebAIM:

Foreground	Background	snook	WebAIM
green = #008000	white	5.137:1 AA pass, AAA fail	5.14:1 AA pass, AAA fail
green = #008000	#F0F6FF	4.729:1 AA pass, AAA fail	4.73:1 AA pass, AAA fail
#FF6666	white	2.859:1 fail	2.86:1 fail
#ff6666	#f0f6ff	2.632:1 fail	2.63:1 fail
orange = #ffa500	white	1.974:1 fail	1.97:1 fail
orange = #ffa500	#f0f6ff	1.817:1 fail	1.82:1 fail

Looks like we need better colours!

[nigelmegitt]

Playing with the colour picker in snook:

• choosing #005F00 for green would work;
• choosing #9F1B1B for red would work;
• choosing #734B00 for orange would kind-of work but doesn't look anything like orange.

[aside: I'm loving GitHub Markdown's blob of colour after those colour values!]

Another thing we could play with would be to put a background colour behind the text and use black or white foreground colour to get a better result.

For example:

• using #006600 for background green and white foreground passes
• using #FF6666 for background red and black foreground passes
• using #FFA500 for background orange and black foreground passes

Codepen that does that, by way of example: https://codepen.io/nigelmegitt/pen/dKVObZ

[spoeschel]

• choosing #005F00 for green would work;
• choosing #9F1B1B for red would work;
• choosing #734B00 for orange would kind-of work but doesn't look anything like orange.

For me having red-green colour blindness, these colours are unfortunately not easily distinguishable.

I would prefer the background colour approach. The example you propose seems to be good. I would just prefer colours that are more close to real green or red, if possible. Does using different background (instead of text) colours maybe relax the contrast requirements? Would it possibly allow to use the current text colors of #388 as background colours?

[nigelmegitt]

@spoeschel The only colour that is different from the current text colours of #388 is the green one.

Using white text on a green background fails WCAG AAA, though it passes AA. Adjusting just the "value" slider on the snook.ca viewer, starting from #008000 and going darker, the first value that passes is #006600. Can you find a better colour that passes?

If you want the red to be redder, #B60000 would pass as a background colour with white foreground.

[nigelmegitt]

A codepen showing those colours as per #391 (comment) but with a slightly paler orange of #FFC000 is at https://codepen.io/nigelmegitt/pen/NzajYW - does that look better @spoeschel ?

[nigelmegitt]

Following @spoeschel 's comments about red and green being hard to tell apart for some people, I noticed that the words are also a similar shape, beginning and ending with the same letter and being about the same width on the screen, so I've updated the codepen to include a check mark or a cross or an exclamation mark to make it even quicker and easier to tell them apart.

[palemieux]

I like the idea of adding a mark. Adding a background to the term will require the removal of the background on alternate rows, which is probably ok.

[nigelmegitt]

Adding a background to the term will require the removal of the background on alternate rows

@palemieux I don't follow why?

I see that the current approach in the issues-359-363-374-375-376-380-reformat-features-table+misc-editorial-issues branch is to use <td class="permitted">permitted ... but surely a search and replace with <td><span class="permitted label">permitted</span> would be straightforward? (assuming you used the same styles as I defined in the codepen - obviously you could structure them a different way). Similarly for prohibited and permitted-deprecated, obviously.

That would have the small advantage of not needing to make the td.permitted::first-line have a special style, which is brittle in the case that any other text is ever placed on the same line as the word "permitted".

[spoeschel]

@nigelmegitt

I noticed that the words are also a similar shape, beginning and ending with the same letter and being about the same width on the screen

This is one of the reasons why it is difficult to distinguish the different dispositions and why we need additional means. Your idea with the marks provides a good additional indication (especially when the table is printed on a B/W printer) and should be adopted as well.

does that look better @spoeschel ?

Regarding the prohibited and permitted colours, comparing both next to each other is quite OK, but the colour combination is not suitable for just catching a glimpse unfortunately.

With white foreground colour I wasn't able to find a suitable combination with snook.ca that passes WCAG 2 AAA Compliance, but with black foreground for all three dispositions, it seems to work:

https://codepen.io/anon/pen/XYeEoy

• #50FF50 for permitted
• #FF5F5F for prohibited
• #FFC000 for permitted-deprecated

[I wasn't able to find out how you added the colour boxes]

[nigelmegitt]

@spoeschel the trick is to enclose the hex RGB value in backticks like so:

• #50FF50 for permitted
• #FF5F5F for prohibited
• #FFC000 for permitted-deprecated

[nigelmegitt]

@spoeschel the colours you have in #391 (comment) look fine to me. I'm happy with that option also.