Design always for accessibility first. If accessibility is an afterthought, things can get difficult.
You might benefit from starting your designs in grayscale and adding color when the design first works in grayscale. At least test your designs in grayscale while you choose your colors. And you should check your colors for contrast as you're picking them out.
The most important thing to check with the color choices is, of course, the contrast. Make sure the colors you pick have enough contrast wherever they are used. Utilize color checker tools, there are a lot of good ones available.
There are a few known problematic color combinations. Avoid these or if you need to have these, make sure they have enough contrast between them.
Don't use color alone to convey information. You can use, for example, dots, patterns, and textures. You should also check that your content is legible if Windows High Contrast or Inverted Colors are active.
The WCAG criteria specify contrast requirements for both text and graphic elements. For each element, the contrast difference between the content and the background must be checked.
For text, the AA level has minimum requirements for regular and large text separately. Large text is defined as text that is at least 24 pixels in size or 19 pixels in bold.
Regular text must have a minimum colour contrast of 4.5:1.
For large text, the colour contrast requirement is slightly lower at 3:1. This same requirement applies to graphic elements such as icons.
Design properly visible focus styles if the browser defaults won't have enough contrast in your design. While the browser defaults are ok for the WCAG requirements, they still aren't very visible on all browsers.
Avoid images of text. If you're designing a layout for other people to use, make sure the contrast and other criteria are ok with whatever kind of images people use. WCAG AAA level defines that images of text can only be used for pure decoration or where a particular presentation of the text is essential to the information being conveyed, for example, logos.
Avoid text on images. If you use them, always make sure the contrast is ok. The same goes for images of text, if you're designing a layout for other people to use, you have to make sure the contrast is ok with whatever kind of images and text people use. This can often be a little difficult if you only use a colored veil with lower opacity between the image and the text. It can be better to use a block of solid color behind the text, that way the contrast is usually more easily manageable. Or just avoid using these altogether if you're uncertain about the contrast. There are probably many tools to test contrast for text on an image, but here is one: Text on background image a11y check
You will need to ensure the users can zoom in without losing content. Text in an image will naturally lose all clarity when zoomed and they can also be quite problematic for responsive design. Text on top of an image can work when zoomed, but it might not look as pretty as the original design.
WCAG criterion 1.4.1 (Level A) specifies that color cannot be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This criterion is often failed with links. Links should be styled with more than just color changes. Combine the use of color with an underline or different font weight to make links more recognizable. Note! The visual cue cannot be provided on hover, it will fail the criterion.
Red and pink are the same color (hue) but they have different lightness (which is not color ). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. For example, if the surrounding text is red and the link is pink it would pass. Similarly, light green and dark red differ both by color and by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater before focus or pointing.
For usability and accessibility, links are recommended to be underlined by default. Otherwise, there are requirements for the link color in relation to the background and the surrounding body text. The restrictions for colors can get a bit tricky, especially if you're trying to aim for level AAA. I recommend using the default underline in the links to make things easier for both you as the designer and the users of the website.
It is recommended to provide users with information about external links. This is not required, but it makes your links clearer for your users. You can, for example, use the icon symbolizing external links.
Otherwise, link text must have at least a 3:1 contrast with surrounding body text and must present a non-color indicator (typically underline) on mouse hover and keyboard focus. In addition, both links and body text must have at least 4.5:1 contrast with the background (3:1 for large text) to meet WCAG 2 Level AA. I recommend using WebAIM's Link Contrast Checker to make sure you meet all the requirements for links using only the color as their identifier.
When designing charts and other data visualization, remember to also use non-color indicators:
Use color as the secondary visual cue.
It's great to use interactivity in data visualizations, like allowing users to view individual graph elements isolated. There are a lot of pre-coded chart libraries. When selecting the one you'll use, remember to check its accessibility and also how much of the visuals you can customize. I've heard that Highcharts is the most accessible one.
You should start by designing all three states for the steps (past, current, future) in one shade to avoid using color to convey meaning. And after that, you can make them visually unique by using non-color styling. And then finally, add color. This way you'll always have the color as the secondary visual cue.