search

frappe / charts

Simple, responsive, modern SVG Charts with zero dependencies
https://frappe.io/charts
MIT License
14.9k stars 716 forks source link

Accessibility issue: default text colors are low-contrast #324

Closed mathiasbynens closed 3 years ago

mathiasbynens commented 3 years ago

The default text colors used by frappe-charts for axis labels have insufficient contrast. Here’s an example from the docs:

The axis text uses a small font size and is #555b51 on a white background. Since we probably want to keep the font size as-is, Increasing contrast by using, say, #33383d, goes a long way towards making the text more readable IMHO.

scmmishra commented 3 years ago

Next version of charts has CSS variables overrides that can solve these problems. You can install it using yarn add frappe-charts@next

Alternatively you can do css overrides, works with current version as well

.chart-container .axis,
.chart-container .chart-label {
  fill: #252525;
}

Refer: Charts 2.0.0.rc8