Closed dbranchini closed 3 weeks ago
https://identity.stanford.edu/design-elements/color/accent-colors/
I've reviewed this again, and we decided to go with reds and blues. I've updated the original description to avoid confusion. (Justin's colors will no longer be correct.) The National Eye Institute explains Red/Green and Blue/Yellow as the most common types of color blindness. Colorbrewer2.org allows you to select color-blind safe palettes. I decided on a Red/Blue palette for these maps and it's been tested on a color blindness simulator.
Digital Red - #B1040E - Maps we don't have Digital Blue - #006CB8 - Maps we do have
Do you have example object URLs (e.g. druids) that have the colors that are changing (that were used for those screenshots above)?
It will nice to see them in a browser. It will also be nice to try and re-create on localhost for testing.
$primary-color: <%= Rails.application.config_for(:settings)["color"] %>; body { background-color: $primary-color; }
so that it respects the values in LEAFLET settings instead of being hardcoded in the CSS above.LEAFLET
settings in Earthworks: https://github.com/sul-dlss/earthworks/blob/main/config/settings.yml#L236-L245 @dbranchini What color for active section of the map?
To be consistent with other map types for the active/selected feature (which is blue everywhere else), I'm modifying this again.
I'm working from this colorblind safe palette suggestion - https://colorbrewer2.org/#type=diverging&scheme=RdYlBu&n=5.
I'm purposefully not using the Stanford accent colors for this and instead focusing on the data visualization and colorblind-safe colors.
Also, @dnoneill explained to me that some of my examples above are actually WMS and images, so we don't have control over the color on the front end. Could we check whether there's a setting in GeoServer that would allow us to change the default color(s)?
@dbranchini Map with updated colors
Oh, is that yellow for maps we have? It looks really faded. I can barely notice it. I don't think this will work.
I can update to see how the overlay works with a grayscale map.
Ooh, yeah, that contrast is too low. What about a dark blue? Pasting my Slack comments here for convenience:
Just a thought… The default “Selected” color in Esri software is CYAN #00FFFF and the default for QGIS is YELLOW #FFFF00. Would either of those work (since they are familiar) for Selected Features, and we can stick with Red and Blue for the Index Maps “In Collection” scheme?
It appears that Yellow is a no.
The other option could be blue for maps we have, and then a thicker stroke for the selected map.
Okay I messed around a bit and switched the map to grayscale. Here are some of the things I did. Let me know if you want to huddle and just try different colors.
Accessible red and yellow on grayscale
Digital Red and Blue with a 2x border when selected
Digital Red, Blue, accessible yellow when selected.
Yellow, Digital Red and Cyan for selected
@dbranchini will review these options. Thanks!
SODA suggestion - blue/red is good, but add a pattern to one of the squares (either the have or have not) so we're not just using color to indicate something. Here's my followup to that:
NOTE:
Tried the stripes, far to difficult to do with just css. Ends up looking weird. In order to do this properly we would have to update the leaflet overlay with some complicated css which isn't maintenance friendly.
The white border would have the same issue, you would have to add a second overlay to the map.
Digital Red, Blue, accessible yellow when selected, is my favorite of these. What if the fill is yellow, as well? Maybe it is, but the transparency makes the basemap dominate? Could it be, "yellower?"
How does the Digital Red, Blue, and Cyan when selected, look?
Also, +1 on the gray basemap.
Yes. If we use straight yellow it seems to be the best looking:
yellow selected
cyan selected
yellow selected gets my vote and blue, red, yellow is a good choice for accessibility.
Yup, that's the best one. Still love the gray basemap. Thanksy'all!
Problem statement:
I've seen a few variations on index maps. I'm not sure I fully understand the pattern of why one color scheme over another, but I did some research on this topic to see what colors would be color-blind safe. Of course, there are several different kinds of color blindness. I used this site to test a couple of variations -https://pilestone.com/pages/color-blindness-simulator-1, and I used these sites to find a color scheme that's color-blind safe - https://davidmathlogic.com/colorblind/#%23FFC20A-%230C7BDC and https://colorbrewer2.org/#type=diverging&scheme=PuOr&n=3.
Variations in the wild today:
Proposed solution:
For all index maps, use the following color palette:
d7191c - Maps we don't have
ffffbf - Maps we have
2c7bb6 - Selected map (or the blue you're already using elsewhere)
Let's start with a 30-35% opacity too.