search

MESH-Research / Pilcrow

A web application for Collaborative Community Review
https://pilcrow.meshresearch.dev/
GNU Lesser General Public License v3.0
4 stars 3 forks source link

Update Style Guide: Colors and Typography #1306

Closed stephanievaskomsu closed 2 years ago

stephanievaskomsu commented 2 years ago

Problem/Why

Currently we have not established consistent colors and fonts across the CCR application.

Goal/What

Select fonts and a color palette that adheres to accessibility needs.

Solution/How

We will check in with the PPJ editorial team to determine their preferences and then use these as a springboard to determine the colors and fonts for this application.

To Do / Acceptance Criteria

Review Checklist

Accessibility Checklist

wreality commented 2 years ago

Hey team! Please add your planning poker estimate with ZenHub @gmeben @sattler9 @Sruthin86 @vilagshe

wreality commented 2 years ago

Please add your planning poker estimate with ZenHub @stephanievaskomsu

vilagshe commented 2 years ago

I like this color tool (https://coolors.co/2f5496-2ea3f2-66bcf5-8ccdf8-ffffff). It's freemium at $3 a month to use all the built in accessibility features, but you can still use most things like color blindness and I like how you can move colors around or easily select different shades.

sattler9 commented 2 years ago

I agree that is a nice color tool! I gave a presentation last year on choosing colors. The summary slide had these tools on it: Colorzilla - enables color selection from a website that can be added to Firefox or Chrome Webaim’s contrast checker – allows you to test your font color against the background color Webaim’s Link Contrast Checker – includes body text check Color Picker – simplest of the options Coolors.co – another fancier color picker ColorHexa – the one our web designer uses

Just mentioning them in case they help at all, but I am not surprised if others have their favorite tools too.

vilagshe commented 2 years ago

Created a Miro board to start messing with color palettes and took note of what colors we currently have/where they are being used. https://miro.com/app/board/uXjVPemADcE=/

gmeben commented 2 years ago

This is a relevant tool: https://reasonable.work/colors/

vilagshe commented 2 years ago

Met with Shelby, decided on the Triadic palette colors, with one slight modification (swapped the brown for a similar shaded of grey): https://coolors.co/2f5496-2ea3f2-ccd3e0-032c73-77beed-537b3d-520bbd-525252-ad347c

gmeben commented 2 years ago

I'm not sure how to test that fonts meet accessibility needs for those with low-vision or who rely on screen readers. I checked the other criteria I could verify, though.

stephanievaskomsu commented 2 years ago

I think we've done our best here with the research behind the fonts we chose to use?

From: Grant Eben @.> Sent: Tuesday, September 13, 2022 1:21 PM To: MESH-Research/CCR @.> Cc: Vasko, Stephanie @.>; Mention @.> Subject: Re: [MESH-Research/CCR] Update Style Guide: Colors and Typography (Issue #1306)

I'm not sure how to test that fonts meet accessibility needs for those with low-vision or who rely on screen readers. I checked the other criteria I could verify, though.

— Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https://github.com/MESH-Research/CCR/issues/1306*issuecomment-1245714442__;Iw!!HXCxUKc!2SwjLhvL-pfuRzZdECzs11v2jkfD_UrwK1FNNgd0Yj15pWHRstac0nqvLT-vTUGwOxK8ZvNy7h2DU5QacG6UG82X$, or unsubscribehttps://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AXOL4UKADBBPGZTUECR6SDTV6CZZRANCNFSM54THHU5Q__;!!HXCxUKc!2SwjLhvL-pfuRzZdECzs11v2jkfD_UrwK1FNNgd0Yj15pWHRstac0nqvLT-vTUGwOxK8ZvNy7h2DU5QacESJO8kd$. You are receiving this because you were mentioned.Message ID: @.***>