query page custom field only loop another custom post type.

I’m not sure if I should be posting here, but here goes.
I’m working on a school project and have the following code – see below.

When fellow pupil lands on a page, lets say about-us, and the about-us page has a custom field set through an ACF select (colour) and the value is “red”.
I then want to pull in all the custom post type entries that also have “red set” from another custom field type. Does that make sense?

So the page has a custom field of Apples (red) and the sidebar slideshow entries (which are are from another custom post type) “only show posts that also have red selected.

I’m confusing myself writing this ??

I’m not a developer as just starting out so am looking for some guidance.

<?php $args=array(
      'post_type' => 'facts',
      'posts_per_page' => '-1',
      'orderby'    => 'rand',
      'posts_per_page'    => '20');
?>

<div class="facts">
  <h3>Facts</h3>
  <ul class="cycle-slideshow">
    <?php $facts=new WP_Query($args); while ($facts->have_posts()) : $facts->the_post(); ?>
    <li>
      <?php if(get_field('header_image_facts')) { ?>
      <img src="<?php the_field('header_image_facts'); ?>" width="151" height="215">
      <?php } else { ?>
      <?php if(get_field('facts_old_image_url')) { ?>
      <img src="<?php the_field('facts_old_image_url'); ?>" width="151" height="215">
      <?php } } ?>
      <?php if( get_field('header_facts_content') ): ?>
      <span>
      <?php the_field('header_facts_content'); ?>
      </span>
      <?php endif; ?>
      <span class="facts-area" style="display: none !important;">
      <?php
$labels = array();
$field = get_field_object('areas');
$values = get_field('areas');
foreach ($values as $value) {
        $labels[] = $field['choices'][ $value ];
}

foreach ($labels as $k=>$label){
        echo ($label).($k == count($labels) - 1 ? '' : ', ');
}?>
      </span> </li>
    <?php endwhile; wp_reset_postdata(); ?>
  </ul>
  <div class="facts"> <a class="prevbtn" href="#"><<Prev </a> <a class="nextbtn" href="#"> Next>></a> <span>View more Facts</span> </div>
</div>