Improve contrast ratio throughout site

[mdlama]

This seems to me a persistent issue on our site that we could address fairly easily. Here's an example of an issue right now:

Essentially, all links are not meeting the WCAG criteria!! Here's a useful tool:

https://webaim.org/resources/contrastchecker/

[mdlama]

Here's another example with buttons:

[trisketz]

Big question - that color green has been a part of QUBES template colors I think since the beginning. Are we willing to change this?

[mdlama]

I would say yes, we should reconsider the color. Keep it close, but I think accessibility is more important.

• Drew

On Apr 7, 2019, at 2:11 PM, Jenny notifications@github.com wrote:

Big question - that color green has been a part of QUBES template colors I think since the beginning. Are we willing to change this?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/qubeshub/hubzero-cms/issues/190#issuecomment-480615591, or mute the thread https://github.com/notifications/unsubscribe-auth/AEpsAzjORNaPFRiCI9w7R0PNPeTK6bTgks5vejS-gaJpZM4cgRfT.

[trisketz]

I should add about the latest pull #216. There is one place I wasn't sure how to remove the underline link. Under the publication record view - under group ownership. The image has the underline and when you hover over, the link will have bad contrast as well as the underline. The CSS that is being pulled for that section is from: /core/plugins/publications/groups/assets/css/groups.css

[mdlama]

I think we can override the groups.css file in that plugin by creating the following file

/app/templates/bmc/html/plg_publications_groups/groups.css

which can then have the following at the top of the file:

@import url('/core/plugins/publications/groups/assets/css/groups.css');

Would that help?

[trisketz]

I think that would, that sounds simple enough. I thought there was going to have to be some complicated process to create an override.

On Wed, Jul 24, 2019 at 2:03 PM M. Drew LaMar notifications@github.com wrote:

I think we can override the groups.css file in that plugin by creating the following file

/app/templates/bmc/html/plg_publications_groups/groups.css

which can then have the following at the top of the file:

@import url('/core/plugins/publications/groups/assets/css/groups.css');

Would that help?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/qubeshub/hubzero-cms/issues/190?email_source=notifications&email_token=AFHSJBORGXZRLOPDVGKVNB3QBCYSFA5CNFSM4HEBC7J2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2XOQQY#issuecomment-514779203, or mute the thread https://github.com/notifications/unsubscribe-auth/AFHSJBKAJ4TKRJMZUAMIHVLQBCYSFANCNFSM4HEBC7JQ .

[trisketz]

Override has been created and I went ahead and fixed the links on the pub record view.

[mdlama]

Hi, Jenny. Here's a picture of the Support system after the code push.

Can we override it so that the summary text isn't bold and underlined?

[trisketz]

I also want to adjust the font on our publications macro, as well as add a border around the images. But I can't get the macro to work on my vagrant at the moment.

[trisketz]

Okie dokie. Getting rid of the underline for links update:

• Increasing contrast of body text color (darkening it a bit from #4c4c4c to #2b2b2b) increases the contrast between link color and surrounding text to pass WCAG: A standards
• I already have the link font different from surround body text. It's subtle but there, which I think works well. The font is the same font as the main navigation.
• I debated changing the hover color to a different color, mostly because it's pretty and adds nice color :) But requirements only dictate that there is a visual change on hover/focus. Right now on hover it goes to a dark blue. Debated changing it to a teal (which would still meet contrast requirements). Just wanted to throw that out there ;)
• This really is a quick change in two files. But there will be some redundant css floating around which I will want to clean up when I was fixing links in other components/plugins when we implemented the underline the first time.