Improve Button Color Contrast for WCAG AAA Compliance

[brylie]

The current button color combinations may not meet WCAG AAA contrast standards, making it difficult for users with visual impairments to distinguish the button text and perceive their selected states. We'll aim to leverage Flutter-specific tools where possible to ensure compliance and improve accessibility.

Tasks:

• Investigate Flutter accessibility tools:
  • Research existing Flutter packages or DevTools features that can assist in analyzing and checking color contrast within Flutter widgets.
  • Some potential starting points:
    • accessibility_tools package: (https://pub.dev/packages/accessibility_tools)
    • Flutter Inspector: Explore built-in accessibility features within the inspector.
• Audit button color contrast:
  • Use the identified Flutter tool(s) alongside a standard contrast checker ([WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)) to measure contrast ratios.
• Adjust colors:
  • Modify text and/or background colors as needed to ensure all button states comply with WCAG AAA contrast guidelines (minimum 7:1 ratio).
  • Prioritize darker text colors on lighter backgrounds for better legibility.
• Document color choices:
  • Create a brief document or comment within the code outlining the color choices, their corresponding WCAG AAA contrast ratios, and the tools used.

Additional Considerations:

• Dynamic color schemes: Explore tools or libraries that allow users to select high-contrast theme options for further accessibility.
• Alternative visual cues: Consider adding icons or other visual indicators to supplement color changes for button states.

Benefits:

• Accessibility: Ensures a significantly improved user experience for individuals with visual impairments.
• Design: Often, high-contrast color choices enhance the overall visual design of the application.
• Flutter-centric approach: Leverages the power of Flutter's ecosystem for accessibility analysis.