ColorBlindnessFlutter

readme

每个应用程序都有颜色。如何确保它们可访问？如何避免可访问性问题，例如同一项目中的其他人开始更改颜色方案？这是一个Flutter插件，可以

  1. 通过将ColorScheme包装在colorBlindnessColorScheme()中来更改整个主题。
  2. 可在CI测试中使用colorBlindnessAssertContrast()。
  3. 用于修改单个颜色。

主要思路是您（暂时）将您的ColorScheme()用ColorBlindnessType作为第二个参数包装到colorBlindnessColorScheme()中。
这样，它将通过修改所有ColorScheme颜色来模拟色盲。
然后，您可以更改类型参数并进行热刷新/重启应用程序，以查看它在不同眼睛下的外观。

交互式示例可让您了解其工作原理

try_here

用法

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

pub package

dependencies:
  color_blindness: ^VERSION

颜色方案

在您的项目中，只需将ColorScheme.dark(...)包装在colorBlindnessColorScheme()中即可。

import 'package:random_colorscheme/color_blindness_color_scheme.dart';

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

CI

您可以添加一个测试以确保ColorScheme始终可访问。
第二个参数是WCAG最低阈值，通常至少为4.5。

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

单色

您可以将colorBlindness()与ColorBlindnessType作为第二个参数一起使用，也可以单独调用这些方法。

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

// direct way
tritanopia(primary);

原因

这是从我的Color Studio项目开始的。在那里，您可以在不同主题中预览不同的色盲。
但是，我看到了为已在现有应用程序中使用ColorScheme的贡献的可能性。
与RandomColorScheme类似，这可能会比Color Studio达到更深层的地方。
另外，pub.dev上与色盲相关的软件包为零，因此这是第一个。
色盲计算是从ColorBlinds项目中检索的。

功能列表

  • 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 }

GitHub

https://github.com/bernaferrari/ColorBlindnessFlutter