Simulate color blindness in color themes.

Overview

Image of Color Blindness on Flutter

Color Blindness on Flutter

Every app has colors. How to make sure they are accessible? How to avoid accessibility issues as other people in the same project start to change the Color Scheme? This is a Flutter plugin that can:

  1. Change the whole theme, by wrapping a ColorScheme with colorBlindnessColorScheme().
  2. Be used in CI tests, with colorBlindnessAssertContrast().
  3. Be used to modify a single color.

The main idea is for you to (temporarily) wrap your ColorScheme() into a colorBlindnessColorScheme() with a ColorBlindnessType as the secondary parameter. Doing so, it will simulate color blindness by modifying ALL ColorScheme colors. Then, you may change the type parameter and hot refresh/restart the app to see how it looks under different eyes.

The interactive sample allows you to see how it works:

Color Blindness on Flutter sample

Usage

In the pubspec.yaml of your flutter project, add the following dependency:

pub package

dependencies:
  color_blindness: ^VERSION

Color Scheme

In your project, just wrap the ColorScheme.dark(...) with colorBlindnessColorScheme().

import 'package:random_colorscheme/color_blindness_color_scheme.dart';

Theme(
  data: ThemeData(
    colorScheme: colorBlindnessColorScheme(ColorScheme.dark(), ColorBlindnessType.tritanopia),
  ),
  child: MyApp(),
)

CI

You can add a test to make sure the ColorScheme is always accessible. The second parameter is the WCAG minimum threshold, which is usually at least 4.5.

colorScheme = ColorScheme.light(
  primary: const Color(0xff9f0042),
  secondary: const Color(0xff1e6100),
);
expect(() => colorBlindnessAssertContrast(colorScheme, 4.0), returnsNormally);

Single Color

You can either use colorBlindness() with ColorBlindnessType as the secondary parameter, or call the methods individually.

const primary = const Color(0xff9f0042);
// indirect way
colorBlindness(primary, ColorBlindnessType.tritanopia);

// direct way
tritanopia(primary);

Reasoning

This started in my Color Studio project. There, you can preview different color blindness in different themes. However, I saw the possibility of contribution for those already using ColorScheme in an existing app. Similar to RandomColorScheme, this may reach deeper places than Color Studio ever will. Also, there were ZERO packages in pub.dev related to color blindness, so this was the first one. The color blindness calculation was retrieved from ColorBlinds project.

Function listing

  • colorBlindnessColorScheme(scheme: ColorScheme, type: ColorBlindnessType): ColorScheme
  • colorBlindnessAssertContrast(scheme: ColorScheme, minThreshold: double = 4.5)
  • colorBlindness(color: Color, type: ColorBlindnessType): Color
  • protanomaly(color: Color): Color
  • deuteranomaly(color: Color): Color
  • tritanomaly(color: Color): Color
  • protanopia(color: Color): Color
  • deuteranopia(color: Color): Color
  • tritanopia(color: Color): Color
  • achromatopsia(color: Color): Color
  • achromatomaly(color: Color): Color

enum ColorBlindnessType { none, protanomaly, deuteranomaly, tritanomaly, protanopia, deuteranopia, tritanopia, achromatopsia, achromatomaly }

Reporting Issues

If you have any suggestions or feedback, issues and pull requests are welcome. You can report here.

License

Copyright 2020 Bernardo Ferrari

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
You might also like...

Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Flutter Material Color Picker Material Color picker is a Flutter widget, that can be customizable. By default, it's Material Colors, but you can defin

Nov 25, 2022

A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Nov 10, 2022

Flutter color picker - A color picker for your flutter app

Flutter color picker - A color picker for your flutter app

flutter_hsvcolor_picker A HSV color picker for your flutter app. RGB HSV Wheel Hue Saturation Values. Getting Started Installation https://pub.dev/pac

Dec 8, 2022

Color matching game - A Crossplatform Color Matching Game made with Flutter

Color matching game - A Crossplatform Color Matching Game made with Flutter

color_matching_game A Color Matching Game built with Flutter. It is a simple app made without adding a plug-in. Play by specifying the red, green and

Nov 21, 2022

A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

Flutter Colorful TabBar A colorful TabBar for Flutter where each tab has a color (inspired by SmartNews app). Getting Started Add this to your package

Jun 17, 2022

Colorpicker flutter - This Color picker for flutter apps provide picking facility for both single and multiple color choosing

Colorpicker flutter - This Color picker for flutter apps provide picking facility for both single and multiple color choosing

This Color picker for flutter apps provide picking facility for both single and

Feb 2, 2022

Choose color theme template - A template will help you choose a color scheme for the application, show how widgets interact with it

Choose color theme template - A template will help you choose a color scheme for the application, show how widgets interact with it

choose_color_theme_template This template will help you choose a color scheme fo

Oct 24, 2022

Flutter chat-app UI with multiple themes & light + Dark mode.

Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI If you liked it, please give it a star . Features of the app - Light Mode + Dark Mode 4 different color themes - pink/teal/yellow/purple I

Oct 5, 2022

Flutter chat-app UI with multiple themes & light + Dark mode.

Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI Only a PART of code available, for complete code ping here Features of the app - Light Mode + Dark Mode 4 different color themes - pink/te

Oct 5, 2022

It is too hard to build coherent and accessible themes with the right colors. This should help.

It is too hard to build coherent and accessible themes with the right colors. This should help.

Color Studio It is hard to choose colors. Most color pickers give you 16 million colors and ask you to pick one. So many options, in fact, that your c

Dec 22, 2022

Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

GTK ❤️ Flutter Unofficial implementation of GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME Human Interface Guidelines. Featur

Dec 26, 2022

Flutter widgets and themes implementing the current macOS design language.

Flutter widgets and themes implementing the current macOS design language.

macos_ui Flutter widgets and themes implementing the current macOS design language. NOTE: This package depends on the excellent native_context_menu pl

Jan 7, 2023

Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

GTK ❤️ Flutter Unofficial implementation of GTK Widgets and libadwaita in Flutter. Based on the GNOME Human Interface Guidelines. NOTE: For getting co

Dec 26, 2022

Flutter widgets and themes implementing the current macOS design language.

Flutter widgets and themes implementing the current macOS design language.

macos_ui Flutter widgets and themes implementing the current macOS design language. NOTE: This package depends on the excellent native_context_menu pl

Jan 1, 2023

A package which provides most of the window decorations from linux themes.

Window Decorations A package which provides most of the window decorations from linux themes. Features Easier to use and implement Native looking wind

Dec 21, 2022

It is too hard to build coherent and accessible themes with the right colors. This should help.

It is too hard to build coherent and accessible themes with the right colors. This should help.

Color Studio It is hard to choose colors. Most color pickers give you 16 million colors and ask you to pick one. So many options, in fact, that your c

Dec 22, 2022

The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes.

The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes.

Flutter Rounded Date Picker The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes. Installing Add

Dec 22, 2022

Extended theme - Extended themes for Flutter

Extended Theme This package will allow you to extend theming in Flutter so you c

Apr 21, 2022

This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

Kitten Tricks This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support. It’s completely free

Dec 30, 2022
Comments
  • Documentation Request - Add comments explaining how color corrections work for color blindness types

    Documentation Request - Add comments explaining how color corrections work for color blindness types

    Hello 👋 ,

    I've been using your library for development purposes and it's been quite the help to ensure accessibility. I read your source code because I wanted to understand how these color corrections worked, but since there is no documentation, I didn't really get anything.

    I also tried checking the library from which you got inspired, but it has no comments on its code as well.

    I was wondering if you could add some comments explaining how the color corrections work or just pointing to an external source of information, so that any developer that uses it can learn more.

    Best, Gil

    opened by gildurao 0
Owner
Bernardo Ferrari
Android native and Flutter developer. Computer Scientist.
Bernardo Ferrari
Material color utilities

Material color utilities Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and

null 878 Jan 8, 2023
Random color generator for Flutter

Random color generator Pub link: https://pub.dartlang.org/packages/random_color This library will generate random colors that are visually pleasing an

Luka Knezic 56 Jun 13, 2022
Flutter plugin to help experiment with different Color Schemes without pain.

Random Color Scheme Making a coherent Material Design theme is hard. This is a Flutter plugin that generates a random color pallet based on Material D

Bernardo Ferrari 77 Dec 6, 2022
flutter app to simulate an illegal game here in brazil

jogo_do_bicho A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Augusto Pieper 1 Jun 27, 2022
Project created in Flutter to simulate transfers

Projeto criado em Flutter para simular transferências. No main inserimos qual va

Thamiris Adriano 1 Dec 22, 2021
A Flutter package to make and use beautiful color scheme based themes.

FlexColorScheme Use FlexColorScheme to make beautiful color scheme based Flutter themes, with optional primary color surface blends. The themes are ba

Rydmike 459 Jan 1, 2023
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Michael S. Lopes 2 Jan 31, 2022
Color picker for Flutter, based on the Google Docs color picker.

Material ColorPicker Color picker for Flutter, based on the Google Docs color picker. Getting Started You can embed into your material app or use it o

Razvan Lung 103 Oct 30, 2022
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021