basemaps icon indicating copy to clipboard operation
basemaps copied to clipboard

Low contrast in the "contrast" style

Open daniel-j-h opened this issue 2 years ago • 5 comments

Hey folks I was playing around with the map styles and found the contrast style to be fitting well for a side project I'm running out.

Unfortunately the contrast style seem to have very low contrast in a few places, check this annotated screen grab

contrast

As an example the contrast ratio between the text and the water background is 1.41:1 (check here).

The cases I could spot check were

color entity
#9590aa text
#84b7cf water
#bfc99c vegetation
#5c4a6b borders

As a second note: the landuse colors are sticking out even at low zoom levels that I had to remove them - these were layers

["landuse_park", "natural_wood", "natural_scrub", "natural_sand", "landuse_beach"]

I was wondering if it makes sense to remove these by default until we have proper landuse information from https://github.com/protomaps/basemaps/issues/154?

daniel-j-h avatar Dec 16 '23 13:12 daniel-j-h

Thanks for the feedback - the "Contrast" style was contributed by @cashc and isn't one of the five styles (light, dark, black, grayscale, white) I'm working on actively maintaining. In the future I would prefer to leave contributed styles to a separate repository, but in the meantime could you find a compromise change to improve the contrast of region labels that may appear over both land/water?

bdon avatar Dec 18 '23 05:12 bdon

Gotcha, I didn't know that and that makes perfectly sense! Maybe @cashc has thoughts here then :bow:

What would help is making it explicit e.g. in the readme or documentation that the light, dark, black, grayscale, and white styles are the main ones going forward. Just to set expectation for users :hugs:

daniel-j-h avatar Dec 18 '23 10:12 daniel-j-h

Hey @daniel-j-h, I agree, that contrast theme needs some work. We at WWOOF decided to maintain our own theme since there wasn't clear consensus on the design specifications for a protomaps theme and we needed a more custom map design. Here's our theme (live), which is a slight deviation from the contrast theme. I'd love to see a community-supported contrast theme we could share! Looking forward to that contributed styles repo you speak of, Brandon!

export default {
  hasCasings: true,
  background: '#dddddd',
  earth: '#ededed',
  park: '#bfc99c',
  hospital: '#ffeae8',
  industrial: '#f8ffed',
  school: '#f2fef9',
  wood: '#bfc99c',
  pedestrian: '#eef0f0',
  scrub: '#bfc99c',
  glacier: 'white',
  sand: '#ebe7da',
  aerodrome: '#dbe7e7',
  runway: '#d1d9d9',
  water: '#84b7cf',
  zoo: '#EBE6ED',
  tunnel_other_casing: '#ffffff',
  tunnel_other: '#f7f7f7',
  tunnel_minor_casing: '#e2e2e2',
  tunnel_minor: '#ebebeb',
  tunnel_medium_casing: '#e1e1e1',
  tunnel_medium: '#ebebeb',
  tunnel_major_casing: '#e3cfd3',
  tunnel_major: '#ebebeb',
  tunnel_highway_casing: '#ebcea2',
  tunnel_highway: '#ebebeb',
  buildings: '#cbcece',
  other: '#ffffff',
  minor_casing: '#e2e2e2',
  minor: '#fff2bb',
  medium_casing: '#e1e1e1',
  medium: '#ffea94',
  major_casing: '#e3cfd3',
  major: '#ffdf59',
  highway_casing: '#ebcea2',
  highway: '#e9ac77',
  railway: '#b3bcc9',
  railway_tracks: '#ffffff',
  boundaries: '#5c4a6b',
  waterway_label_halo: 'white',
  waterway_label: '#a4cae1',
  bridges_other_casing: '#ffffff',
  bridges_other: '#ffffff',
  bridges_minor_casing: '#e2e2e2',
  bridges_minor: 'white',
  bridges_medium_casing: '#e1e1e1',
  bridges_medium: '#ffffff',
  bridges_major_casing: '#e3cfd3',
  bridges_major: '#ffffff',
  bridges_highway_casing: '#ebcea2',
  bridges_highway: '#fefffc',
  roads_label: '#91888b',
  roads_label_halo: 'white',
  ocean_label: 'white',
  ocean_label_halo: '#a4cae1',
  peak_label: '#61bb5b',
  peak_label_halo: '#ffffff',
  subplace_label: '#757d91',
  subplace_label_halo: 'white',
  city_circle: '#666666',
  city_circle_stroke: 'white',
  city_label: '#3c3c3c',
  city_label_halo: 'white',
  state_label: '#777777',
  state_label_halo: 'white',
  country_label: '#9590aa',
  country_label_halo: 'white',
};

cashc avatar Dec 18 '23 18:12 cashc

Awesome @cashc that is gorgeous! Wondering if you want to submit a PR with those changes and we just update that contrast theme for now in this repo until we have found a better place for it.

daniel-j-h avatar Dec 19 '23 13:12 daniel-j-h

those changes are already in main thanks to #46. I think what's needed is messing with the layers in styles/src/base_layers.ts because I think there has been new layers added without new colors to support them and I suspect that's what's changed to cause the issues in your screenshot.

the project I'm working on has deviated our layers from the protomaps/basemaps layers so that's why we're not experiencing these issues (yet, probably 😅)

cashc avatar Dec 20 '23 04:12 cashc