Disabled Button is not WCAG accessible and there is no way to set alternative color with themes other than using opacity.

[jgray7]

Description

I'm trying to make a WCAG accessible disabled button. There does not appear to be a way to do this using themes other than setting the opacity to a high value which then makes it not look disabled. Is there a way to set the button to a dark grey instead of changing the opacity?

CodeSandbox/Snack link

https://snack.expo.dev/jHcnUckyx9K5WDm8rnOz1

Steps to reproduce

https://color.adobe.com/create/color-contrast-analyzer

import React from 'react';

// 1. Add extendTheme to import
import {
  NativeBaseProvider,
  extendTheme,
  HStack,
  Stack,
  Button,
  Checkbox,
  Input,
  Center,
  Text,
  Box,
} from 'native-base';

// 2. Extend the theme to include custom colors, fonts, etc
const newTheme = {
  components: {
    Button: {
      // Can simply pass default props to change default behaviour of components.
      baseStyle: {
        rounded: 'sm',
        width: '90%',
        _text: {
          fontWeight: 'bold',
          textTransform: 'uppercase',
        },
        _disabled: {
          opacity: '50',
          color: 'muted.600',// There currently does not seem like a way to set color
        },
      },
      variants: {
        solid: {
          shadow: 3,
        },
        outline: {
          borderColor: 'primary.500',
        },
      },
    },
  },
};
const theme = extendTheme(newTheme);

function App() {
  return (
    <Stack space={3} width="100%">
      <Button>Primary</Button>
      <Button>Hover</Button>
      <Button isDisabled>Disabled</Button>
      <Button variant="outline">Outline Variant</Button>
      <Button variant="outline" isDisabled>
        Outline Variant
      </Button>
      <Button variant="ghost">Ghost Variant</Button>
      <Button variant="ghost" isDisabled>
        Ghost Variant
      </Button>
    </Stack>
  );
}

function Example() {
  return (
    <Center flex={1}>
      <HStack space={3} width="32.5rem" margin="2">
        <App />
      </HStack>
      <Stack space={3}>
        <HStack space={3}>
          <Checkbox
            value="test"
            accessibilityLabel="This is a dummy checkbox"
          />
          <Text>Default Unchecked</Text>
        </HStack>
        <HStack space={3}>
          <Checkbox
            value="test"
            accessibilityLabel="This is a dummy checkbox"
            isDisabled
          />
          <Text>Default Unchecked Disabled</Text>
        </HStack>
        <HStack space={3}>
          <Checkbox
            value="test"
            accessibilityLabel="This is a dummy checkbox"
            defaultIsChecked
          />
          <Text>Default Checked</Text>
        </HStack>
        <HStack space={3}>
          <Checkbox
            value="test"
            accessibilityLabel="This is a dummy checkbox"
            defaultIsChecked
            isDisabled
          />
          <Text>Default Checked Disabled</Text>
        </HStack> 
      </Stack>
    </Center>
  );
}

export default () => {
  return (
    <NativeBaseProvider theme={theme}>
      <Example />
    </NativeBaseProvider>
  );
};

NativeBase Version

3.4.28

Platform

• Android
• CRA
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response