[Wactclc-primo] [Primo] New Primo UI colors and accessibility

Wed May 24 16:07:12 PDT 2017

Lesley,

If you look at ‘inspect element’ in Chrome, you can see that the text you want to re-color is in the following classes:

Best-location-library-code
Best-location-sub-location

So you could try modifying the colors with CSS that looks something like:

span.best-location-library-code {
    color: #502D7F;  /* desired font color here */
}

span.best-location-sub-location {
    color: #502D7F;  /* desired font color here */
}

[cid:image002.png at 01D2D4A7.CD94BE70]

[Title: Big Bend Community College Logo]

Wade Guidry
Library Consortium Services Manager
Big Bend Community College
wadeg at bigbend.edu<mailto:wadeg at bigbend.edu>

509.760.4474
www.bigbend.edu<http://www.bigbend.edu>

Big Bend Community College • 7662 Chanute Street NE • Moses Lake, WA 98837-3299

From: Wactclc-primo [mailto:wactclc-primo-bounces at lists.ctc.edu] On Behalf Of Lesley Caldwell
Sent: Wednesday, May 24, 2017 1:34 PM
To: WACTCLC Primo discussions <wactclc-primo at lists.ctc.edu>
Subject: [Wactclc-primo] FW: [Primo] New Primo UI colors and accessibility

Hi all,

Thought you might be interested in these responses from Stewart and Kate (UW).

Apologies for crossposting as I’m sure some of you are on Primo-L!
Lesley

From: Lesley Caldwell
Sent: Wednesday, May 24, 2017 1:32 PM
To: 'Ex Libris user community discussion list for Primo' <primo at exlibrisusers.org<mailto:primo at exlibrisusers.org>>
Subject: RE: [Primo] New Primo UI colors and accessibility

Thank you, Stewart and Kate, for addressing both the technical and broader accessibility concern of my question!

Stewart- I’m wondering if I can edit the Code Tables as a Total Care customer, but I’ll look into that.

Best,
Lesley

From: Primo [mailto:primo-bounces at exlibrisusers.org] On Behalf Of Kate Deibel
Sent: Wednesday, May 24, 2017 11:57 AM
To: Ex Libris user community discussion list for Primo <primo at exlibrisusers.org<mailto:primo at exlibrisusers.org>>
Subject: Re: [Primo] New Primo UI colors and accessibility

Another thing I recommend in checking contrast is to make sure that the colors you are testing are the ones actually being displayed. The default new UI CSS uses transparency with colors quite a bit to my annoyance.

For example, let’s say that I have a <div> the following styles applied:

background-color: #4B2E83;
opacity: 0.8;

When rendered, the actual background color will be #6F579B and not #4B2E83.

I’ve not had much luck finding color contrast checkers that incorporate rgba or opacity into their calculations. Until I do or build my own, I just have to use a color picker tool (like the ColorPicker addon in FF) to get the rendered colors and check them manually.

I have on my list of eventual todos to try to identify where the Primo CSS uses rgba, opacity, etc. in order to identify parts that need to be handchecked. Or I’ll deactivate that problematic CSS. I also have on my docket to bring these accessibility CSS concerns to the Primo team in UW’s consultations.

--

Kate Deibel, PhD | Web Applications Specialist
Information Technology Services & Digital Strategies
University of Washington Libraries
--

"When Thor shows up, it's always deus ex machina."

From: Primo [mailto:primo-bounces at exlibrisusers.org] On Behalf Of Stewart Baker
Sent: Tuesday, May 23, 2017 3:39 PM
To: Ex Libris user community discussion list for Primo <primo at exlibrisusers.org<mailto:primo at exlibrisusers.org>>
Subject: Re: [Primo] New Primo UI colors and accessibility

In the New UI, you can define new CSS in the custom CSS for whatever you need, and it will (or should) overwrite the default.  This article in the New UI documentation<https://knowledge.exlibrisgroup.com/Primo/Product_Documentation/New_Primo_User_Interface/New_UI_Customization_-_Best_Practices#CSS_Components_and_Customizations> has an overview of that.

Have you already tried that step, or are you just having trouble getting it to take for the links in that particular section of your page?

On Tue, May 23, 2017 at 1:10 PM, Lesley Caldwell <LCaldwell at pierce.ctc.edu<mailto:LCaldwell at pierce.ctc.edu>> wrote:
Hi everyone,

Our consortium is working to move to the new Primo UI this summer. One of our librarians used WebAIM (http://webaim.org/resources/contrastchecker/) to check colors and found on our results page, the contrast is not high enough between the light blue location text (#78a4c7) and the gray background (#f3f3f3), according to the Web Content Accessibility Guidelines.

I think the color of links on our Primo homepage<https://pierce-primo.hosted.exlibrisgroup.com/primo-explore/search?vid=PIERCE&lang=en_US&sortby=rank> (color: #5c92bd) are also too close. However, I don’t see an option to change either of these in the css.

Has anyone else looked into this?

Thanks for the guidance!

Lesley Caldwell

Systems and Instruction Librarian

Pierce College

p:

(253) 840-8420<tel:(253)%20840-8420>

a:

1601 39th Ave SE, Puyallup, WA 98374

w:

www.pierce.ctc.edu<http://www.pierce.ctc.edu/> e: lcaldwell at pierce.ctc.edu<mailto:lcaldwell at pierce.ctc.edu>

[http://www.pierce.ctc.edu/50th-Email.png]

_______________________________________________
Primo mailing list is managed by ELUNA and IGeLU.
To update options or unsubscribe, go to: https://exlibrisusers.org/options/primo
For more information, go to: https://exlibrisusers.org/listinfo/primo

--
Stewart C Baker
Systems / Institutional Repository Librarian
Western Oregon University
503-838-8890
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ctc.edu/pipermail/wactclc-primo_lists.ctc.edu/attachments/20170524/b837366a/attachment-0002.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image002.png
Type: image/png
Size: 33766 bytes
Desc: image002.png
URL: <http://lists.ctc.edu/pipermail/wactclc-primo_lists.ctc.edu/attachments/20170524/b837366a/attachment-0006.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image003.png
Type: image/png
Size: 12944 bytes
Desc: image003.png
URL: <http://lists.ctc.edu/pipermail/wactclc-primo_lists.ctc.edu/attachments/20170524/b837366a/attachment-0007.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image004.png
Type: image/png
Size: 5381 bytes
Desc: image004.png
URL: <http://lists.ctc.edu/pipermail/wactclc-primo_lists.ctc.edu/attachments/20170524/b837366a/attachment-0008.png>