Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Partition: calculate relative luminance for text #606

Closed
3 tasks
rshen91 opened this issue Mar 25, 2020 · 1 comment · Fixed by #608 or elastic/kibana#69126
Closed
3 tasks

Partition: calculate relative luminance for text #606

rshen91 opened this issue Mar 25, 2020 · 1 comment · Fixed by #608 or elastic/kibana#69126
Assignees
Labels
enhancement New feature or request :partition Partition/PieChart/Donut/Sunburst/Treemap chart related released Issue released publicly :styling Styling related issue

Comments

@rshen91
Copy link
Contributor

rshen91 commented Mar 25, 2020

Is your feature request related to a problem? Please describe.
Currently in pie charts there's logic in place for white text or black text

/** @internal */
export function colorIsDark(color: Color) {
  // fixme this assumes a white or very light background
  const rgba = stringToRGB(color);
  const { r, g, b, opacity } = rgba;
  const a = rgba.hasOwnProperty('opacity') ? opacity : 1;
  return r * 0.299 + g * 0.587 + b * 0.114 < a * 150;
}

but this needs to account for relative luminance to be in accordance with WCAG standards for text and background contrast.

Additional context
This logic may be in place already in this elastic/kibana#60261 and we can potentially just move the logic onto the elastic-charts end.

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

Checklist

Delete any items that are not applicable to this feature request.

  • this request is checked against already exist requests
  • every related Kibana issue is listed under Kibana Cross Issues list
  • kibana cross issue tag is associated to the issue if any kibana cross issue is present
@rshen91 rshen91 added enhancement New feature or request :styling Styling related issue labels Mar 25, 2020
@rshen91 rshen91 self-assigned this Mar 25, 2020
@markov00 markov00 added the :partition Partition/PieChart/Donut/Sunburst/Treemap chart related label Mar 26, 2020
nickofthyme pushed a commit that referenced this issue Jun 8, 2020
Updates partition charts to allow for adaptive text color to meet acceptable color contrast ratio. For more information on text contrast see [docs](https://github.com/elastic/elastic-charts/blob/master/docs/0-Intro/1-Overview.mdx#background-colors-and-text-contrast).

BREAKING CHANGE
Adds `background` to the `Theme` object with the `BackgroundStyle` type that accepts a `color` value as a `string. Note text color might be different after changes from this PR, see docs on how to disable `textContrast` in the partition chart config.

Closes #606
markov00 pushed a commit that referenced this issue Jun 15, 2020
# [19.5.0](v19.4.1...v19.5.0) (2020-06-15)

### Bug Fixes

* **tooltip:** show true opaque colors in tooltips ([#629](#629)) ([23290be](23290be)), closes [#628](#628)
* path of stacked area series with missing values ([#703](#703)) ([2541180](2541180))
* remove double rendering ([#693](#693)) ([ebf2748](ebf2748)), closes [#690](#690)

### Features

* **partition:** add 4.5 contrast for text in partition slices ([#608](#608)) ([eded2ac](eded2ac)), closes [#606](#606)
* add screenshot functions to partition/goal ([#697](#697)) ([5581c3c](5581c3c))
@markov00
Copy link
Member

🎉 This issue has been resolved in version 19.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Jun 15, 2020
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
# [19.5.0](elastic/elastic-charts@v19.4.1...v19.5.0) (2020-06-15)

### Bug Fixes

* **tooltip:** show true opaque colors in tooltips ([opensearch-project#629](elastic/elastic-charts#629)) ([323b325](elastic/elastic-charts@323b325)), closes [opensearch-project#628](elastic/elastic-charts#628)
* path of stacked area series with missing values ([opensearch-project#703](elastic/elastic-charts#703)) ([93f063f](elastic/elastic-charts@93f063f))
* remove double rendering ([#693](elastic/elastic-charts#693)) ([1a9bbb9](elastic/elastic-charts@1a9bbb9)), closes [#690](elastic/elastic-charts#690)

### Features

* **partition:** add 4.5 contrast for text in partition slices ([opensearch-project#608](elastic/elastic-charts#608)) ([59d6d49](elastic/elastic-charts@59d6d49)), closes [opensearch-project#606](elastic/elastic-charts#606)
* add screenshot functions to partition/goal ([opensearch-project#697](elastic/elastic-charts#697)) ([6d2ff64](elastic/elastic-charts@6d2ff64))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request :partition Partition/PieChart/Donut/Sunburst/Treemap chart related released Issue released publicly :styling Styling related issue
Projects
None yet
2 participants