diff --git a/vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js b/vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js
index fdf76406f77..db1a6eb604a 100644
--- a/vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js
+++ b/vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js
@@ -501,6 +501,27 @@ define([
             $widget._EmulateSelected($widget._getSelectedAttributes());
         },
 
+        disableSwatchForOutOfStockProducts: function () {
+            let $widget = this, container = this.element;
+
+            $.each(this.options.jsonConfig.attributes, function () {
+                let item = this;
+
+                if ($widget.options.jsonConfig.canDisplayShowOutOfStockStatus) {
+                    let salableProducts = $widget.options.jsonConfig.salable[item.id],
+                        swatchOptions = $(container).find(`[data-attribute-id='${item.id}']`).find('.swatch-option');
+
+                    swatchOptions.each(function (key, value) {
+                        let optionId = $(value).data('option-id');
+
+                        if (!salableProducts.hasOwnProperty(optionId)) {
+                            $(value).attr('disabled', true).addClass('disabled');
+                        }
+                    });
+                }
+            });
+        },
+
         /**
          * Render swatch options by part of config
          *
@@ -891,6 +912,7 @@ define([
                 .attr('disabled', true)
                 .addClass('disabled')
                 .attr('tabindex', '-1');
+            this.disableSwatchForOutOfStockProducts();
         },
 
         /**