Colors for Index maps

[dbranchini]

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.

[jcoyne]

016895 is "sky dark" and #FFE781 is "Illuminating light" in the stanford scheme:

https://identity.stanford.edu/design-elements/color/accent-colors/

[dbranchini]

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

https://identity.stanford.edu/design-elements/color/web/

[peetucket]

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.

[peetucket]

1. Update CSS declarations in Geoblackight: https://github.com/geoblacklight/geoblacklight/blob/main/app/assets/stylesheets/geoblacklight/modules/index_maps.scss#L45-L56 e.g. $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.
2. Update legend text in Geoblacklight: https://github.com/geoblacklight/geoblacklight/blob/main/app/components/geoblacklight/index_map_legend_component.html.erb#L8
3. Update LEAFLET settings in Earthworks: https://github.com/sul-dlss/earthworks/blob/main/config/settings.yml#L236-L245
4. Update colors in sul-embed: https://github.com/sul-dlss/sul-embed/blob/main/app/javascript/src/modules/geo_viewer.js#L93-L96

[dnoneill]

@dbranchini What color for active section of the map?

[dbranchini]

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.

d7191c - Maps we don't have

ffffbf - Maps we have

2c7bb6 - Selected map (or the blue you're already using elsewhere)

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)?

[dnoneill]

@dbranchini Map with updated colors

[dbranchini]

Oh, is that yellow for maps we have? It looks really faded. I can barely notice it. I don't think this will work.

[dnoneill]

I can update to see how the overlay works with a grayscale map.

[mapninja]

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.

[dbranchini]

The other option could be blue for maps we have, and then a thicker stroke for the selected map.

[dnoneill]

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

• better, still think the yellow is washed out.

Digital Red and Blue with a 2x border when selected

• Personally I think this isn't particularly noticeable. The selected on is three rows up from the bx-10 popup

Digital Red, Blue, accessible yellow when selected.

Yellow, Digital Red and Cyan for selected

[marlo-longley]

@dbranchini will review these options. Thanks!

[dbranchini]

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:

• diagonal red lines to the red squares or the maps we don't have
• the focus is white line with blue around it and a thicker blue stroke - 2 pixels (could be a darker blue too)

https://www.figma.com/design/nkgg905s5FyXoyPZjVMco0/EarthWorks?node-id=1352-24800&t=PBMgAHUCMsAYOLeK-4

[dnoneill]

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.

[mapninja]

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?

[mapninja]

Also, +1 on the gray basemap.

[dnoneill]

Yes. If we use straight yellow it seems to be the best looking:

yellow selected

cyan selected

[dbranchini]

yellow selected gets my vote and blue, red, yellow is a good choice for accessibility.

[mapninja]

Yup, that's the best one. Still love the gray basemap. Thanksy'all!