Accessibility validation: Text must exceed CCR threshold

Hi everybody. I get two errors from the links on the map:

a: 'Report a problem' Violation 339 CCR of 3.6, adjust foreground and background colors to exceed 4.5. a: 'OpenStreetMap' Violation 341 CCR of 3.6, adjust foreground and background colors to exceed 4.5.

Could you please help me to fix them? It seems that the contrast is not respected. Thanks. Monica.

accessibility contrast

asked 23 Sep '20, 13:38

Monica
11●1●1●3
accept rate: 0%

Which map (app, website, ...) are you talking about and what are you trying to do when the error appears?

(23 Sep '20, 14:28) TZorn

I have an iframe with the OpenStreetMap on my website, and the two links on it (report a problem and OpenStreetMap) don't respect contrast color analysis. Is there a way to change their color? Thanks.

(29 Sep '20, 09:56) Monica

Not with the one you are using. You would have to find a different tile source w/ higher contrast, e.g. set up your own style with a vector tile provider or set up tiles yourself.

(29 Sep '20, 10:28) Spiekerooger

You say "I have an iframe with the OpenStreetMap on my website". What do you mean by "the OpenStreetMap"? I can't see exactly the text that you are referring to at https://www.openstreetmap.org .

(29 Sep '20, 10:47) SomeoneElse ♦

Look at the map at the end of this page, please: http://pa6.produzione.clio.it/ I don't know how to set up my own style. Can you help me? Thanks. Monica.

(29 Sep '20, 11:24) Monica

That's a Google map (for me, at least). The terms link is to https://www.google.com/intl/en-GB_US/help/terms_maps/ .

(29 Sep '20, 11:29) SomeoneElse ♦

Sorry, wrong link: http://pa6.produzione.clio.it/ The page is this one.

(29 Sep '20, 11:51) Monica

showing 5 of 7 show 2 more comments

One Answer:

active answers oldest answers newest answers popular answers

That embed link is https://www.openstreetmap.org/export/embed.html?bbox=17.732620239257816%2C40.18097176388722%2C18.443984985351566%2C40.5268484330944&layer=mapnik . The source is visible (at least in Firefox) as view-source:https://www.openstreetmap.org/export/embed.html?bbox=17.732620239257816%2C40.18097176388722%2C18.443984985351566%2C40.5268484330944&layer=mapnik">https://www.openstreetmap.org/export/embed.html?bbox=17.732620239257816%2C40.18097176388722%2C18.443984985351566%2C40.5268484330944&layer=mapnik">view-source:https://www.openstreetmap.org/export/embed.html?bbox=17.732620239257816%2C40.18097176388722%2C18.443984985351566%2C40.5268484330944&layer=mapnik . There are two links in there - the css and the javascript. To modify that embed link you'd need to take a copy of those three things and edit them so that they do what you want to do (it's the javascript that handles the "report" button).

Perhaps easier would be to use Leaflet (the Javascript library that OpenStreetMap.org uses) yourself to embed a map - see https://leafletjs.com/.

permanent link

This answer is marked "community wiki".

answered 29 Sep '20, 12:25

SomeoneElse ♦
36.9k●71●370●866
accept rate: 16%

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

*italic* or _italic_
**bold** or __bold__
link:[text](http://url.com/ "title")
image?![alt text](/path/img.jpg "title")
numbered list: 1. Foo 2. Bar
to add a line break simply add two spaces to where you would like the new line to be.
basic HTML tags are also supported

learn more about Markdown

Question tags:

accessibility ×12
contrast ×6

question asked: 23 Sep '20, 13:38

question was seen: 1,125 times

last updated: 29 Sep '20, 12:25

Accessibility validation: Text must exceed CCR threshold

Follow this question

Related questions