New Component: Color contrast/legibility checker

arjavbadjatiya commented 3 years ago

Description

Color contrast checker component that indicates legibility of a selected foreground color (or multiple foreground colors) on a selected background color.

Current implementation

An initial version of this was implemented in ArcGIS Online under Organization > Security > Information banner and Organization > General > Shared themes. A more accessible and improved version was implemented in the ArcGIS Online home page editor, shown here:

Acceptance Criteria

We have received feedback on this pattern from Level Access and Microsoft. Accordingly, the following is the minimum requirement:

Display a foreground and background color pair with an option to edit (invoke the calcite color picker).
Display "Legible" (with a check mark) or "Not legible" (with an x) next to the foreground color.
Display the actual contrast ratio next to the foreground color.
Display the hint (explaining color contrast accessibility) to help users learn why this is necessary.
When proceeding with "Not legible combinations" (by hitting done/save etc. on wherever the component is used) we are required to provide a warning letting users know that their choice is inaccessible. However, Level Access says it is okay to let them proceed with the inaccessible combination as long as we provide this additional warning.

Variants needed

We would require two variants of this component:

Standard version with multiple foreground colors compared to a single background color in a tabular form.
Minimal version with a single foreground-background color pair.

Helpful Details

Currently used in 3 places in ArcGIS Online. CC @rmstinson @julio8a @macandcheese

Teams that are waiting for this or will benefit from this in the future:

Dashboards (CC @bpatterson88 )
Instant apps (Kurt Stremel/Kelly Hutchins)
Hub (CC @FelFly )
StoryMaps (Qun Hui/Christopher Eber)
Map viewer (CC @mitc7862 @asangma )

arjavbadjatiya commented 2 years ago

@macandcheese Could we consider this one for 10.1? As teams are starting to implement this, it'll help if they can adopt a standardized component!

macandcheese commented 2 years ago

I think standardizing this across the platform is a great idea, and I'd be happy to work on designs for it. I do think the level of complexity here is somewhat above what most Calcite Components currently contain, and as such may (?) be better suited for Arcgis components or another shared internal library.

If this were to be a part of CC, we'd need a way to allow users to configure / translate the text provided in the "warning alert" which may add a bit of bloat to the component. Besides that the api could probably handle both of the desired cases above with a child - item relationship so users could have a single pair, or multiple items, as requested.

@jcfranco @driskull @benelan any thoughts on the scope of this and if its a good fit in CC or another shared lib?

benelan commented 2 years ago

I personally agree that this should start as an arcgis-app-component, especially with the timeline above. That repo is able to move a lot faster, and in the long run it can always be ported over to CC. I don't think we have the bandwidth to be adding new Calcite Components before v1 release.

juliepowell commented 2 years ago

Should this be part of ArcGIS App Components? Or a documented pattern? Calcite team should consult on the design for this component regardless.

yelenakreyndel commented 1 year ago

Assigning this to Adam to refine any existing design work. @macandcheese, given your workload for designing new components in 2023, can you complete this component for May release so that we could implement in September? cc'ing @brittneytewks

yelenakreyndel commented 1 year ago

@juliepowell This will be a Calcite component.

yelenakreyndel commented 1 year ago

After speaking with Adam, we decided to move the milestone to July. @geospatialem @brittneytewks

macandcheese commented 1 year ago

Still think this is a great platform level / arcgis app component pattern built with Calcite components, but itself is more complex than something that belongs in CC.

There could be vast differences in how an app wants to present this kind of workflow to a user.

brittneytewks commented 1 year ago

Out of scope for Calcite but a candidate for ArcGIS component library

Esri / calcite-design-system