Skip to content

Follow BS #30168 (WCAG algo + update master)#323

Merged
ffoodd merged 4 commits intov5-devfrom
feature/update-wcag-algo
Feb 14, 2020
Merged

Follow BS #30168 (WCAG algo + update master)#323
ffoodd merged 4 commits intov5-devfrom
feature/update-wcag-algo

Conversation

@ffoodd
Copy link
Contributor

@ffoodd ffoodd commented Feb 14, 2020 •
edited
Loading

Note: Please remember that both in Bootstrap & Boosted, in v4 or v5, the color-yiq() function is white-first, meaning if the color contrast ratio with white is sufficient, function returns white — and only returns black otherwise.

Test

I'm using a single SCSS file to check color-yiq() results.

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

@each $color, $value in $colors {
  .yiq-#{$color} {
    color: color-yiq($value);
  }
}

Results

Color v4-dev PR v5-dev Contrast finder
#0d6efd #000 #fff #fff #fff
#6610f2 #fff #fff #fff #fff
#6f42c1 #fff #fff #fff #fff
#d63384 #000 #fff #000 #fff
#dc3545 #000 #fff #000 #fff
#fd7e14 #fff #000 #000 #000
#ffc107 #000 #000 #000 #000
#28a745 #000 #000 #000 #000
#20c997 #000 #000 #000 #000
#17a2b8 #000 #000 #000 #000
#fff #000 #000 #000 #000
#6c757d #fff #fff #fff #fff
#343a40 #fff #fff #fff #fff

FYI Colour Contrast Analyzer gives the same result than Contrast-Finder.

@ffoodd ffoodd added this to the 5.0.0-alpha milestone Feb 14, 2020
@ffoodd ffoodd self-assigned this Feb 14, 2020
@ffoodd ffoodd requested a review from Lausselloic February 14, 2020 09:12
@ffoodd ffoodd changed the title Update WCAG algo Follow BS #30168 (WCAG algo + update master) Feb 14, 2020
Lausselloic
Lausselloic approved these changes Feb 14, 2020
View reviewed changes
Copy link
Member

@Lausselloic Lausselloic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good idea to manage values as static!

@ffoodd
Copy link
Contributor Author

ffoodd commented Feb 14, 2020

good idea to manage values as static!

Props to @ysds in Bootstrap's team, and in Material (already used this years ago…).

@ffoodd ffoodd mentioned this pull request Feb 14, 2020
Merged
Lausselloic
Lausselloic approved these changes Feb 14, 2020
View reviewed changes
Copy link
Member

@Lausselloic Lausselloic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

@ffoodd ffoodd merged commit 29abbd8 into v5-dev Feb 14, 2020
@ffoodd ffoodd deleted the feature/update-wcag-algo branch February 14, 2020 15:06
@ffoodd ffoodd mentioned this pull request Feb 14, 2020
Merged
ffoodd
ffoodd commented Feb 14, 2020
View reviewed changes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Lausselloic Lausselloic Lausselloic approved these changes

Assignees

@ffoodd ffoodd

Labels

👂 accessibility v5

Projects

None yet

Milestone

5.0.0-alpha

Development

Successfully merging this pull request may close these issues.

2 participants

@ffoodd @Lausselloic