You are viewing limited content. For full access, please sign in.

Question

Question

RIO 10.1 Web Access Font Colors

asked on July 18, 2016

Hello

Is there anyway to change the default font and background colours in the RIO 10.1 user interface (Web Access).

In 9.2, we had crisp, clear back on white.  Now we have teal on gray, and it does not meet our accessibility standards for visual acuity.  it is very faded looking.

Any help would be appreciated.

Kathy

 

 

 

1 0

Answer

SELECTED ANSWER
replied on July 19, 2016

For the teal text on blue background, the hex color codes are #177D93 and #E2F3F7 respectively. The contrast between the two are 4.19 which meets the standards for larger text but falls just below the 4.5 standard for smaller text. I have filed the issue to update the text color to something darker to increase the contrast to above 4.5. In the meantime, hopefully Melanie's CSS fix does the trick, or you can enlarge the browser slightly to hit that 3:1 requirement. 

2 0

Replies

replied on July 18, 2016

There's no supported way to change colors in the interface, but the css files are editable and that's what controls things like color.  Any changes you make would likely be overridden by updates.

That said, part of our testing is making sure that the contrast levels follow WCAG guidelines.  Can you be more specific about where you think there's not enough contrast?

0 0
replied on July 19, 2016

Thank you for your reply.  Primarily, we don't see enough contrast with the background colors.  We have folders on the left panel of Web Access where the font is back on a grey background - not ideal but legible.  The middle panel however, where the names of the contents of a folder are listed, has teal font on a light grey background - a color scheme which does not provide enough contrast to prevent eye strain.  Ideally we would like to change it all to black font on white which we had in 9.2

We've tried this on various computers around the office and the difficult-to-read teal on grey is the same on all of them.

I would appreciate it if you could give me the name of the CSS file (and perhaps the tag names) where the font and background colors for this page are coded.  To meet the accessibility guidelines of the University of Toronto, we will be forced to edit this.  

I appreciate your help

Kathy

0 0
replied on July 19, 2016

Kathy,

Are the University of Toronto's guidelines something you could share with us? If you'd rather not post them on this public site, we can contact you offline. We'd like to know if they're more restrictive than WCAG ones and take that into account in future releases.

0 0
replied on July 19, 2016 Show version history

Hi Katherine,

In the file [installation_dir]\Web Files\Assets\browse.css, you can simply add the lines:

.entryListingDisplayName > a {
    color: black;
}
replied on July 19, 2016 Show version history

Hi Kathy,

In the file [installation_dir]\Web Files\Assets\browse2.min.css, you can simply add the lines:

.entryListingDisplayName > a {
    color: black;
}
3 0
replied on July 19, 2016

Hi Miruna

Thank you Melanie, for the CSS file.

Miruna, to answer your question, we adhere to the WCAG 2.0 requirements as well.  I just don't find that the contrast ratio on Web Access v10.1 meets the WCAG Guideline 1.4.3 - Contrast Level AA.  In particular, G18 which suggests a contrast ratio of 4.5:1.

I do not know the hex codes used in the in the v10.1 color scheme but when I test what I perceive, I don't see a contrast ratio higher than 3:1. 

The part of the guidelines to which I am referring can be seen at https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=143  .

I will try and input Melanie's code and let you know what happens.  Thanks.

0 0
SELECTED ANSWER
replied on July 19, 2016

For the teal text on blue background, the hex color codes are #177D93 and #E2F3F7 respectively. The contrast between the two are 4.19 which meets the standards for larger text but falls just below the 4.5 standard for smaller text. I have filed the issue to update the text color to something darker to increase the contrast to above 4.5. In the meantime, hopefully Melanie's CSS fix does the trick, or you can enlarge the browser slightly to hit that 3:1 requirement. 

2 0
replied on July 20, 2016

Melanie's instructions to add a line to the CSS file worked.  I have changed the font color to black and now have a stronger contrast ratio.  Thank you, everyone, for your help.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.