Project

General

Profile

Actions
Copy link

Bug #19462

closed

Use WCAG standards to decide on new color scheme for wb2

Added by Sarah Zaranek over 2 years ago. Updated about 2 years ago.

Status:
Resolved
Priority:
Normal
Assigned To:
Sarah Zaranek
Category:
Workbench2
Target version:
Arvados - 2022-12-21 Sprint
Story points:
-
Release:
Arvados 2.5.0
Release relationship:
Auto

Description

https://snook.ca/technical/colour_contrast/colour.html#fg=00BFA5,bg=FFFFFF

Example here to test

Subtasks 3 (0 open — 3 closed)

Arvados - Task #19433: Change cyan color and light grey in color scheme ?ResolvedSarah Zaranek12/20/2022Actions
Arvados - Task #19457: Change cyan color of buttonsResolvedSarah Zaranek12/20/2022Actions
Arvados - Task #19857: ReviewResolvedStephen Smith12/20/2022Actions
Actions
Copy link
 #1

Updated by Sarah Zaranek over 2 years ago

same for icon -- he Web Content Accessibility Guidelines recommend a contrast ratio for images of at least 4.5:1

nice read here for accessibility and icons -- https://blog.hubspot.com/website/accessible-icons

Actions
Copy link
 #2

Updated by Peter Amstutz over 2 years ago

  • Target version set to 2022-09-28 sprint
Actions
Copy link
 #3

Updated by Peter Amstutz over 2 years ago

  • Assigned To set to Sarah Zaranek
Actions
Copy link
 #4

Updated by Peter Amstutz about 2 years ago

  • Target version changed from 2022-09-28 sprint to 2022-10-12 sprint
Actions
Copy link
 #5

Updated by Peter Amstutz about 2 years ago

  • Target version changed from 2022-10-12 sprint to 2022-10-26 sprint
Actions
Copy link
 #6

Updated by Peter Amstutz about 2 years ago

  • Target version changed from 2022-10-26 sprint to 2022-11-09 sprint
Actions
Copy link
 #7

Updated by Peter Amstutz about 2 years ago

  • Target version changed from 2022-11-09 sprint to 2022-11-23 sprint
Actions
Copy link
 #8

Updated by Sarah Zaranek about 2 years ago

  • Status changed from New to In Progress

Made a presentation of how to pick a color scheme and also other issues with accessibility for wb2 here:
https://docs.google.com/presentation/d/1HNrhvK7zVZ7jgH3ELbX7KB97SdXCZXrvov_I4Oe1l2c/edit?usp=sharing

Actions
Copy link
 #9

Updated by Sarah Zaranek about 2 years ago

Working on a final version to discussion on the branch -
19462-colorscheme

Actions
Copy link
 #10

Updated by Peter Amstutz about 2 years ago

  • Target version changed from 2022-11-23 sprint to 2022-12-07 Sprint
Actions
Copy link
 #11

Updated by Peter Amstutz about 2 years ago

  • Category set to Workbench2
Actions
Copy link
 #12

Updated by Peter Amstutz about 2 years ago

  • Target version changed from 2022-12-07 Sprint to 2022-12-21 Sprint
Actions
Copy link
 #13

Updated by Peter Amstutz about 2 years ago

  • Release set to 47
Actions
Copy link
 #14

Updated by Sarah Zaranek about 2 years ago

These are what I adjusted
  • Updated process colors, removed yellow and orange and blue, colors either red, green or grey. Green and grey adjusted to meet WCAG contrast requirements.
  • Process chips updated to be outlines when running and filled when finished
  • Updated use of grey 500 to gray 600 when needed
  • Updated Arvadospurple and Arvados primary, to just use shades of blue
  • Updated warning and failed messages to match WCAG contrast requirements , lettering now not yellow or red but grey and background colors stay the same
  • Updated label colors in process panel and collection panels so that they are darker grey and meet contrast requirements
  • Updated label and icons for different panels on collection and process pages
  • Updated color of folders and subprocess icons and file icons to all be the same color of grey in process directory and other locations
Still need to do:
  • "No properties" still in default font and color
  • labels for subprocess columns and for labeling panels for input/outputs need to be a darker grey
  • Update font sizes for everything that is too small
Actions
Copy link
 #15

Updated by Peter Amstutz about 2 years ago

  • Status changed from In Progress to Resolved
Actions
Copy link

Also available in: Atom PDF