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

### 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 (

Primary
Hover
Disabled
Outline Variant

Outline Variant

Ghost Variant

Ghost Variant


);
}

function Example() {
return (







Default Unchecked



Default Unchecked Disabled



Default Checked



Default Checked Disabled



);
}

export default () => {
return (



);
};

```

### NativeBase Version

3.4.28

### Platform

- [X] Android
- [ ] CRA
- [X] Expo
- [X] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

_No response_