Increase color contrast


Recently our clients who are using DatoCMS on our recommendations are complaining about the user-friendliness and specifically the colour contrast when using DatoCMS. Not the colour that we are able to change, but the border color and label for inputs and texareas.

It’s specifically a problem when creating a new record and the textareas are empty - it’s difficult to see there even is a textarea when you have problem with sight and/or a older computer screen.

Neither the borders (#f0f0f0) or label text (#848484 set in 15px) pass an WCAG color contrast/luminance test. See print screens from WebAIM’s color contrast checker below.

A complete compliance in WCAG AA/AAA maybe isn’t possible in the foreseeable future, but since we able to change the more decorative colors in DatoCMS it wouldn’t be outrages to demand that we also should be able to change the “general” body text color, that could also have an impact on the general border colors. Or even a general dark mode/them with better color contrast.

Border color test

Text color test