Thanks @RogersRoland for involving us in input on the changes to this tool.
Consider any changes by checking OADA compliance standards on colour contrast and text size first
I would suggest that the starting point is to evaluate any changes, and the current table and page based upon the OADA standards for web accessability.
Below, I ranked the changes against contrast accessability standards - hope it provides some guidance on going forward.
Preferences or corporate expectations on colour palettes can then be considered.
Reference documents for my suggestions
This may take a bit of refering to the tools I used at
https://webaim.org/resources/contrastchecker/ Colour contrast checker
http://www.colorzilla.com/firefox/ Colourzilla colour grabber - use it to grab the colour and put it into the checker above.
Also the OADA site on website compliance and development tools and tips at https://www.ontario.ca/page/how-make-websites-accessible
Compliance deadline
- Beginning January 1, 2014: new public websites, significantly refreshed websites and any web content posted after January 1, 2012 must meet Web Content Accessibility Guidelines (WCAG) 2.0 Level A
- Beginning January 1, 2021: all public websites and web content posted after January 1, 2012 must meet WCAG 2.0 Level AA other than criteria 1.2.4 (live captions) and 1.2.5 (pre-recorded audio descriptions)
Reference: https://www.ontario.ca/page/how-make-websites-accessible#section-1
A tool that can be used to assess font and backgrounds is found at
https://webaim.org/resources/contrastchecker/
I would suspect that Rogers may have their own tool set for doing this - but in absence of the tools, the tool above gives you a way of making assessments. I had to make guesses on the actual colour codes, as we are seeing an image, not the original text font and background and texture codes. But I was able to get a rough idea.
I have used the tool to make the following observations and answers to the questions.
First row -
Current presentation - compliant to AA standard, but not AAA
White text with current font on dark red background meets AA standards, but doesn't meet the AAA standards required for 2021, on a 11 point font. It would require 14 point font to meet AAA.
Consider shooting for AAA on all new changes on sites as you have to be there in less than 2 years. Do it now and get it out of the way and you can also be a leader in making changes and colour pallets for the rest of the Rogers pages.
Second row
Current presentation - not compliant to AA standard, on the lighter colour
- compliant to AA standard on larger font (14 point) only on darker colour and not compliant with AAA standard at all.
- compliance can only be achieved by going to an even darker aqua, or a black font with large font can meet both AA and AAA , Black font will meet AA standard on any size.
- the white text on the light aqua in any font size fails AA standards - the tool I used does not give A standards, as all companies were to move to A standards on sites from prior to 2012 and should be in place now.
The darker aqua does not meet standards of AA unless a font of 14 point font is used (larger text than originally presented, bold or not). That colour choice and text choice cannot meet level AAA at all (2021 standards).
You could go to a darker aqua to meet that standard. I leave it to you to play - I don't know if that red and aqua is a corporate choice of colours or how much variability you have.
Increasing to a contrast of 4.65:1 will meet all standards. It is about twice as dark as the darkest one you presented.
Remaining fonts rows
The remaining rows, passes across the board of size, bold, and black on white (ratio is highest possible - 21.0:1)
Note that my preference given my acuity issues is the larger font of 14.0 but standards, 11.0 would pass.
So take a look at the tool as guidance - I also used a firefox add on colour picker from http://www.colorzilla.com/firefox For a chrome version change firefox in the link to chrome. dont know if there is an IE or Edge version.
It adds an extension, you can grab the colour from the screen view of the table, and then it allows you to copy the code into the first tool I used.
I suspect Rogers must have a tool set for doing this work since these standards have been around since 2012 and I suspect there must also be resource people or documents for working with meeting standards.
Nice to see the changes - The old one was hard to read because of the small fonts for me, but it met most standards, except missed on the AAA standards on the red backgrounds except for the light aqua with white text, some thought appears to been put into the original version. Black fonts work on most colours unless the colour is taken to a very dark level.
Have fun.
Bruce
Edit: definition clarification on size of font:
level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
The contrast tool above provides the contrast ratios of different foreground and background.
These standards could also have been used during the days of the question of fonts and textures on Navigatr.
